d3.js - How to do transition as expected with axis in D3 -

all:

i pretty new d3 transition, wonder how can not apply length transition on axis tick lines when switch data?

my code like:

var data1 = [1,2,3,4]  var data2 = [1,4,8,12]    function draw(data){    	var svg = d3.select(".chart svg");  	if(svg.empty()){  		svg = d3.select(".chart")  				.append("svg");  		svg.append("g")  		.classed("yaxis", true)  	}  	svg.attr("width", 400)  				.attr("height", 300);  	var axisg = svg.select("g.yaxis")  		.attr("transform", function(){  			return "translate(40, 20)";  		})  	var scale = d3.scale.linear();  	scale.domain(d3.extent(data)).range([300-40, 0]);  	var axis = d3.svg.axis();  	axis.scale(scale).orient("left")/*.ticks(5)*/;  	axisg.transition().duration(1500).ease("sin-in-out").call(axis)  	.selectall("line")  			.attr("x2", 300-40)  			.style("stroke", "black")  			.style("stroke-width", "1px");  	axisg.select("path").style("fill", "none")    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>  <button onclick="draw(data1)">data1</button>  <button onclick="draw(data2)">data2</button>    <div class="chart"></div>