D3 en tiempo real streamgraph (Gráfico Visualización de datos)

Me gustaría tener un gráfico de flujo como en este ejemplo: http://mbostock.github.com/d3/ex/stream.html D3 en tiempo real streamgraph (Gráfico Visualización de datos)

enter image description here

pero me gustaría datos en tiempo real que entran desde la derecha y tener datos antiguos salga de la izquierda, de modo que siempre tenga una ventana de 200 muestras. ¿Cómo haría esto para que tenga las transiciones apropiadas?

He intentado cambiar los puntos de datos en la matriz A y luego volver a crear un área como tal

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

pero mis transiciones no hacer que parezca que la tabla se desliza por la pantalla.

Gracias de antemano.

Fuente

2012-03-12 klyngbaek

Trate this tutorial:

Al implementar pantallas en tiempo real de los datos de series de tiempo, a menudo utilizamos el eje x para codificar el tiempo como posición de: a medida que pasa el tiempo, llegan nuevos datos desde la derecha, y el viejo los datos se deslizan hacia la izquierda. Si utiliza incorporado path interpolators, sin embargo, es posible ver algunos sorprendente comportamiento de D3 ...

para eliminar la maniobra, interpolar la transformación en lugar de la ruta de. Esto tiene sentido si considera que el gráfico visualiza una función; su valor no está cambiando, solo mostramos una parte diferente del dominio. Al deslizar la ventana visible a la misma velocidad que llega nuevos datos, podemos sin problemas de visualización de datos en tiempo real ...

Fuente

2012-03-12 12:31:00 mbostock

Gracias! Repasé el tutorial, pero tuve muchos problemas para tratar de extrapolar eso al ejemplo del gráfico de flujo. Finalmente utilicé esta línea de código para cambiar mis múltiples rutas. vis.selectAll ("ruta"). Data (data0) .attr ("d", area) .attr ("transform", null) .transition(). Duration (50) .ease ("linear"). attr ("transformar", "traducir (" + -10 + ")") cada uno ("fin", función (d, i) {si (i == 0) transición();}); Solo puedo invocar la transición recursivamente en la primera ruta; de lo contrario, todo el gráfico cambia una vez para cada ruta, y luego tengo una explosión de devoluciones de llamada. ¿Hay una mejor manera de hacer esto? ¡Gracias! – klyngbaek

He publicado mi ejemplo aquí: http://lyngbaek.com/real-time-stream-graph.html de vez en cuando la 'ruta' inferior se desalinea de la 'superior', probablemente por la forma en que hacer mi llamada de transición recursiva(). He extrapolado de su tutorial y he creado una matriz de datos separada para las rutas superior e inferior. Luego, yo personalmente le doy un nuevo valor a cada uno de ellos. Tengo que volver a calcular un nuevo d3.layout.stack() y volver a dibujarlo. Luego cambio mis 2 matrices de datos y repito. ¿Es esta la metodología correcta, o hay una manera más clara de hacerlo? ¡Gracias de nuevo! – klyngbaek

Eso es más de lo que estaba buscando con mi pregunta aquí: http: // stackoverflow.com/questions/12764813/producing-a-live-graph-with-d3 ¿Cómo se recomienda obtener los datos del servidor para el cliente? –

Aquí está un ejemplo sencillo: http://jsfiddle.net/cqDA9/1/ Se muestra una posible solución para hacer el seguimiento y la actualización de los diferentes serie de datos.

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

Fuente

2013-12-07 01:09:40 Jerm

D3 en tiempo real streamgraph (Gráfico Visualización de datos)

Respuesta

Cuestiones relacionadas