D3.js 多线图过渡

Question

我想知道为什么这个多线图上的过渡与它所基于的动画单线图相比是跳跃的：http://www.animatedcreations.net/d3/lineChartAnimated.html

这里提供的小提琴： http://jsfiddle.net/user2477109/QBDGB/

问题是单独更新所有路径吗？它似乎效率低下。谢谢。

graph.select(".line1").attr("d", line).attr("transform", null);
graph.select(".line2").attr("d", line).attr("transform", null);
graph.select(".line3").attr("d", line).attr("transform", null);
graph.select(".line4").attr("d", line).attr("transform", null);

// slide the line left
path1
    .transition()
    .duration(duration)
    .attr("transform", "translate(" + x(t-n+1) + ")");

path2
    .transition()
    .duration(duration)
    .attr("transform", "translate(" + x(t-n+1) + ")");

path3
    .transition()
    .duration(duration)
    .attr("transform", "translate(" + x(t-n+1) + ")");

path4
    .transition()
    .duration(duration)
    .attr("transform", "translate(" + x(t-n+1) + ")");

// slide the x-axis left
    axis.transition()
    .duration(duration)
    .ease("linear")
    .call(xAxis)
    .each("end", tick);

Answer 1

您忘记了.ease('linear') 选项：

path1
    .transition()
    .duration(duration)
    .ease("linear")

小提琴：http://jsfiddle.net/chrisJamesC/QBDGB/4/

作为备注，您应该考虑在四行上循环或对行使用另一个迭代器，因为在这里您硬编码行数