title: d3.js - transform & transition, multiple lines
body: <p>I have followed the instructions at: <a href="http://bost.ocks.org/mike/path/" rel="nofollow noreferrer">http://bost.ocks.org/mike/path/</a> for creating and animating single graphs with single lines.</p>
  
  <p>And, figured out how to create multiple lines in a graph: <a href="https://stackoverflow.com/questions/8689498/drawing-multiple-lines-in-d3-js">Drawing Multiple Lines in D3.js</a></p>
  
  <p><strong>Main Issue:</strong> I am having a hard time transitioning multiple lines after I shift &amp; push in new data into my data array.</p>
  
  <p>I create the <strong><em>N</em></strong> lines with: (time: epoch time, steps forward)</p>
  
  <pre><code>var seriesData = [[{time:1335972631000, value:23}, {time:1335972631500, value:42},...],
                    [{time:1335972631000, value:45}, {time:1335972631500, value:13},...],
                    [{time:1335972631000, value:33}, {time:1335972631500, value:23},...}],
                    [...],[...],...
                    ];
  
  var seriesColors = ['red', 'green', 'blue',...];
  
  line = d3.svg.line()
          .interpolate(interpolation)
          .x(function(d) { return x(d.time); })
          .y(function(d) { return y(d.value); });
  
  graphGroup.selectAll(".line")
          .data(seriesData)
              .enter().append("path")
              .attr("class", "line")
              .attr("d", line)
              .style('stroke', function(d, i) { return seriesColors[i]; })
              .style('stroke-width', 1)
              .style('fill', 'none');
  </code></pre>
  
  <p>And am trying to update <strong><em>N</em></strong> lines with a Javascript setInterval(...) calling a method with:</p>
  
  <pre><code>graph.selectAll("path")
      .data(seriesData)
      .attr("transform", "translate(" + x(1) + ")")
      .attr("d", line)
        .transition()
      .ease("linear")
      .duration(transitionDelay)
      .attr("transform", "translate(" + x(0) + ")");
  </code></pre>
  
  <p>It can draw the initial set perfectly, but as soon as I update the data array, the lines just disappear.</p>
  
  <hr>
  
  <p><strong><em>UPDATE 01</em></strong></p>
  
  <p>I realized that I am using epoch time values in the x (xAxis shows date:time) as my example would probably work if I used the illustrative seriesData above.</p>
  
  <p>The problem was the "transform", "translate" using x(1), x(0) was returning huge numbers, way <em>larger</em> than my graph needed to be transitioned.</p>
  
  <p>I modified the <em>update</em> <strong><em>N</em></strong> lines method (above) to use a manual approach:</p>
  
  <p><strong>New Issue:</strong>
  Now the graph moves left correctly, but the lines/graph <em>pops</em> back to the right, each setInterval update executes.</p>
  
  <p>It's push/shift'ing the seriesData array correctly but it doesn't keep scrolling to the left to show the new data that IS actually being drawn.</p>
  
  <pre><code>graph.selectAll("path")
          .data(seriesData)
          .attr("d", line)
          .attr("transform", null)
            .transition()
          .ease("linear")
          .duration(2000)
          .attr("transform", "translate(-200)");
  </code></pre>
  
  <p>Another reference that I have used is this: <a href="http://bl.ocks.org/1148374" rel="nofollow noreferrer">http://bl.ocks.org/1148374</a></p>
  
  <p>Any thoughts?</p>