D3.js获得意想不到的过渡效果

Question

我想在d3.js v4中实现mbostock's path transition tutorial。但是出现了意想不到的非连续过渡效应。

经过数小时的试验和游戏，仍然无法弄清楚出了什么问题......

如何获得连续转换，为什么下面的代码无法正常工作？

我按照以下方式安排了转换：

var transition = d3.transition()
    .duration(duration)
    .ease(d3.easeLinear);

transition.on('start', tick)

function tick() {
    // update the domains
    now = new Date();
    x.domain([now - (n - 2) * duration, now - duration]);
    y.domain([0, d3.max(data)]);

    // push the accumulated count onto the back, and reset the count
    data.push(Math.min(30, count));
    count = 0;

    // redraw the line
    svg.select(".line")
      .attr("d", line)
      .attr("transform", null)


    // slide the x-axis left
    axis.transition(transition).call(x.axis) 

    // slide the line left
    path.transition(transition)
      .attr("transform", "translate(" + x(now - (n - 1) * duration) + ", 0)")

    d3.active(this).transition(transition).on('start', tick) 

    // pop the old data point off the front
    data.shift();
  }

完整的代码在这里：

http://codepen.io/reverland/pen/QdeEOO?editors=1010