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/

正如你应该考虑循环的四个线或作为这里使用另一个迭代器的线的话，你硬编码行数