d3.js - transformación y transición, líneas múltiples

Question

He seguido las instrucciones en: http://bost.ocks.org/mike/path/ para crear y animar gráficos individuales con líneas simples.

Y, descubierto la manera de crear varias líneas en un gráfico: Drawing Multiple Lines in D3.js

Problema principal: Estoy teniendo un tiempo difícil la transición de múltiples líneas después de que me muevo & empuje de nuevos datos en mi matriz de datos.

creo el N líneas con: (tiempo: Tiempo de época, los pasos hacia adelante)

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

y estoy tratando de actualizar N líneas con un Javascript setInterval (...) llamando a un método con:

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

Puede dibujar el conjunto inicial a la perfección, pero tan pronto como yo upd comió la matriz de datos, las líneas simplemente desaparecen.

---

ACTUALIZACIÓN 01

me di cuenta de que estoy usando valores de tiempo época en la x (ejeX muestra la fecha: el tiempo) como mi ejemplo, probablemente funcionará si he utilizado el seriesData ilustrativa anteriormente.

El problema era que la "transformación", "traducir" usando x (1), x (0) devolvía números enormes, forma mayor que que mi gráfica necesitaba ser transferida.

he modificado la actualización N método líneas (arriba) para utilizar un enfoque manual:

New Issue: Ahora el gráfico se mueve a izquierda correctamente, pero las líneas/gráfico pops a la derecha, se ejecuta cada actualización de setInterval.

Es presionar/desplazar la serie serie matriz correctamente, pero no sigue desplazándose hacia la izquierda para mostrar los nuevos datos que realmente se están dibujando.

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

Otra referencia que he utilizado es la siguiente: http://bl.ocks.org/1148374

¿Alguna idea?

Answer 1

Una cosa que salta a mí como una posibilidad de error es de las llamadas de datos que se utilizan, la inicial es

.data(seriesData) 

la actualización utiliza

.data([seriesData]) 

que puede causar problemas, pero es difícil de decir sin ver el resto de lo que está pasando, ¿puedes ponerlo en jsfiddle?