title: D3.js multiple line graph transitions
body: <p>I am wondering why the transitions on this multiple line graph are jumpy compared to the animated single line graph it is based on: <a href="http://www.animatedcreations.net/d3/lineChartAnimated.html" rel="nofollow">http://www.animatedcreations.net/d3/lineChartAnimated.html</a></p>
  
  <p>Fiddle provided here:
  <a href="http://jsfiddle.net/user2477109/QBDGB/" rel="nofollow">http://jsfiddle.net/user2477109/QBDGB/</a></p>
  
  <p>Is the problem updating all of the paths separately?  It does seem inefficient.  Thanks.</p>
  
  <pre><code>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);
  </code></pre>