d3.js - transform & transition, multiple lines

Question

I have followed the instructions at: http://bost.ocks.org/mike/path/ for creating and animating single graphs with single lines.

And, figured out how to create multiple lines in a graph: Drawing Multiple Lines in D3.js

Main Issue: I am having a hard time transitioning multiple lines after I shift & push in new data into my data array.

I create the N lines with: (time: epoch time, steps forward)

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');

And am trying to update N lines with a Javascript setInterval(...) calling a method with:

graph.selectAll("path")
    .data(seriesData)
    .attr("transform", "translate(" + x(1) + ")")
    .attr("d", line)
      .transition()
    .ease("linear")
    .duration(transitionDelay)
    .attr("transform", "translate(" + x(0) + ")");

It can draw the initial set perfectly, but as soon as I update the data array, the lines just disappear.

---

UPDATE 01

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.

The problem was the "transform", "translate" using x(1), x(0) was returning huge numbers, way larger than my graph needed to be transitioned.

I modified the update N lines method (above) to use a manual approach:

New Issue: Now the graph moves left correctly, but the lines/graph pops back to the right, each setInterval update executes.

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.

graph.selectAll("path")
        .data(seriesData)
        .attr("d", line)
        .attr("transform", null)
          .transition()
        .ease("linear")
        .duration(2000)
        .attr("transform", "translate(-200)");

Another reference that I have used is this: http://bl.ocks.org/1148374

Any thoughts?

Answer 1

One thing that jumps out at me as a possibility for error is the data calls that are used, the initial is

.data(seriesData)

the update uses

.data([seriesData])

which may cause issues, but its hard to tell without seeing the rest of what is going on, can you perhaps put it on jsfiddle?