Graph D3.js多重折线图转换

我想知道为什么与它所基于的动画单线图相比，这个多线图上的过渡是跳跃的：

这里提供的小提琴：

单独更新所有路径是否存在问题？这看起来确实很低效。谢谢

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);

您忘记了

.ease（'linear'）

选项：

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

小提琴：

---

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

我不敢相信我错过了！另外，我想知道为什么单线图上有恒定的平滑重画，而四线图没有？有没有可能用一行以上的代码来达到这种效果呢？就像您在JSFIDLE中看到的那样，只需在每个转换中使用它。