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/

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

D3.js多线图转换

1 个答案: