3

我想知道为什么这个多线图上的过渡与它所基于的动画单线图相比是跳跃的：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);
4

1 回答 1

2

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

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

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

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

于 2013-06-25T06:35:20.783 回答