D3 in tempo reale streamgraph (grafico Data Visualization)

Question

Vorrei un grafico flusso come in questo esempio: http://mbostock.github.com/d3/ex/stream.html

ma vorrei dati in tempo reale che entrano da destra e hanno dati vecchi partire da sinistra, in modo da avere sempre una finestra di 200 campioni. Come potrei fare in modo tale da avere le transizioni appropriate?

Ho provato a cambiare i punti di dati nella matrice una e poi ricreando un'area come tale

data0 = d3.layout.stack()(a); 

ma le transizioni non far sembrare il grafico è scorrevole attraverso lo schermo.

Grazie in anticipo.

Answer 1

Prova this tutorial:

Nell'attuare visualizzata in tempo reale di dati di serie, spesso usiamo l'asse x per codificare tempo posizione: il passare del tempo, nuovi dati provengono da destra, e vecchio i dati si spostano verso sinistra. Se si utilizza built-in path interpolators, tuttavia, è possibile vedere qualche comportamento sorprendente di D3 ...

per eliminare il wiggle, interpolare la trasformazione, piuttosto che il percorso. Questo ha senso se si pensa al grafico come alla visualizzazione di una funzione - il suo valore non sta cambiando, stiamo solo mostrando una parte diversa del dominio. Facendo scorrere la finestra visibile alla stessa velocità che arriva nuovi dati, si può visualizzare senza problemi i dati in tempo reale ...

Answer 2

Ecco un semplice esempio: http://jsfiddle.net/cqDA9/1/ Esso mostra una possibile soluzione per tenere traccia e aggiornate le diverse serie di dati.

var update = function() { 
    for (Name in chart.chartSeries) { 
     chart.chartSeries[Name] = Math.random() * 10; 
    } 
    for (Name in chart2.chartSeries) { 
     chart2.chartSeries[Name] = Math.random() * 10; 
    } 
    setTimeout(update, 1000); 
} 
setTimeout(update, 1000);