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/

作为一个注释你应该考虑循环四行或使用另一个迭代器为行，因为你硬编码行数