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/

正如你應該考慮循環的四個線或作爲這裏使用另一個迭代器的線的話，你硬編碼行數