D3.js множественных линейный график переходы

Question

Я задаюсь вопрос, почему переходы на этой множественной линейной диаграмме являются нервными по сравнению с анимированным однолинейным графом она основана на: http://www.animatedcreations.net/d3/lineChartAnimated.html

Fiddle представлена ​​здесь: 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/

Как замечание следует рассмотреть зацикливание на четырех линиях или с помощью другого итератора для линий как тут жесткий код количество строк