D3.js multiple line graph transitions

Question

I am wondering why the transitions on this multiple line graph are jumpy compared to the animated single line graph it is based on: http://www.animatedcreations.net/d3/lineChartAnimated.html

Fiddle provided here: http://jsfiddle.net/user2477109/QBDGB/

Is the problem updating all of the paths separately? It does seem inefficient. Thanks.

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

You forgot the .ease('linear') option:

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

Fiddle: http://jsfiddle.net/chrisJamesC/QBDGB/4/

As a remark you should consider looping on the four lines or using another iterator for the lines as here you hard code the number of lines