title: D3 multi line chart - strange animation
body: <p>I have created a multi line chart with a simple animation. In the beginning there are no data and after clicking a button new values are emulated and the line "move" left. The move is animated using a "shift". </p>
  
  <p>The problem occurs when the lines "fill" the whole graph area (that means there are y values for all x values) and then the lines are animated in a different way. It looks like the y values are animated on a curve, not slided to the left.</p>
  
  <p>The animation works good for both axes:</p>
  
  <pre><code>svg.selectAll("g .x.axis")
    .transition()
    .duration(500)
    .ease("linear")
    .call(xAxis);
  svg.selectAll("g .y.axis")
    .transition()
    .duration(500)
    .ease("linear")
    .call(yAxis);
  </code></pre>
  
  <p>And not for lines (<a href="http://bl.ocks.org/benjchristensen/2657838" rel="nofollow">this code</a> helped me a lot)</p>
  
  <pre><code>svg.selectAll("g .city path")
    .data(processedData).transition().duration(500)
    .ease("linear")
    .attr("d", function(d, i) { return line(d.values); })
    .attr("transform", null);
  </code></pre>
  
  <p>The Fiddle is accessible <a href="http://jsfiddle.net/QqdYE/10/" rel="nofollow">here</a>.</p>
  
  <p>Thanks for help.</p>