d3.js - transform & transition, multiple lines

Question

Ho seguito le istruzioni a: http://bost.ocks.org/mike/path/ per creare e animare singoli grafici con linee singole.

E, capito come creare più linee in un grafico: Drawing Multiple Lines in D3.js

Problema principale: Sto avendo un momento difficile transizione più righe dopo sposto & spinta a nuovi dati nel mio array di dati.

ho creare il N linee con: (tempo: tempo di un'epoca, si fa avanti)

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

e sto cercando di aggiornare N linee con un Javascript setInterval (...) chiamando un metodo con:

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

Può disegnare perfettamente il set iniziale, ma non appena eseguo l'aggiornamento mangiato l'array di dati, le linee scompaiono.

---

AGGIORNAMENTO 01

mi sono reso conto che sto usando valori temporali epoca nella x (asseX mostra Data: tempo) come il mio esempio probabilmente funziona se ho usato il seriesData illustrativo sopra.

Il problema era "trasformare", "tradurre" utilizzando x (1), x (0) restituiva numeri enormi, modo più grande del mio grafico necessario per la transizione.

ho modificato il aggiornamentoN metodo linee (sopra) per utilizzare un approccio manuale:

nuovo numero: Ora grafico si sposta a sinistra in modo corretto, ma le linee/grafico pop indietro a destra, viene eseguito ogni aggiornamento di SetInterval.

Fa push/shifting della serie Data array correttamente ma non continua a scorrere verso sinistra per mostrare i nuovi dati che sono effettivamente disegnati.

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

Un altro riferimento che ho usato è questo: http://bl.ocks.org/1148374

Qualche idea?

Answer 1

Una cosa che salta fuori di me come una possibilità di errore è le chiamate dati che vengono utilizzati, l'iniziale è

.data(seriesData) 

l'aggiornamento utilizza

.data([seriesData]) 

che può causare problemi, ma è difficile dirlo senza vedere il resto di ciò che sta succedendo, puoi forse metterlo su jsfiddle?