graph - D3.js 多线图转换

Question

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

此处提供 fiddle : 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")

fiddle :http://jsfiddle.net/chrisJamesC/QBDGB/4/

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