index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<body style="margin:0">
<p>This examples shows bug in ticks positioning if using step method for animation.</br>
Click timeline to animate. On animation end ticks are incorrectly positioned.</p>
<div id="timeline"></div>
<script>
var w = $('#timeline').width(),
startX, endX,
svg = d3.select('#timeline').append('svg')
  .attr('class', 'timeline')
  .attr('width', w)
  .attr('height', 100),
x = d3.time.scale.utc()
  .domain([new Date(2000, 0, 1), new Date(2003, 0, 1)])
  .range([0, w]),
xAxis = d3.svg.axis().scale(x).tickSize(-20);
svg.insert('rect').attr('width', w).attr('height', 100).attr('fill', '#ffccdd')
var holder = svg.append('g').attr('class', 'axis');

holder.call(xAxis);

svg.on('click', function() {
  startX = x.copy();
  endX = x.copy().domain([new Date(2000, 1, 1), new Date(2001, 1, 1)]);
  holder.transition().duration(700).tween('step', stepRedraw);
});

function stepRedraw(d, i) {
  return function(t) {
    x.domain(d3.interpolateArray(startX.domain(), endX.domain())(t));
    holder.call(xAxis);
  }
}
</script>