javascript - examples - install d3

D3 Real-Time Streamgraph(Visualización de datos de gráficos)

Question

Me gustaría un gráfico de flujo como en este ejemplo: http://mbostock.github.com/d3/ex/stream.html

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

Intenté cambiar los puntos de datos en la matriz a y luego recrear un área como tal

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

pero mis transiciones no hacen que parezca que el gráfico se está deslizando por la pantalla.

Gracias por adelantado.

Answer 1

Este es un ejemplo simple: http://jsfiddle.net/cqDA9/1/ Muestra una posible solución para realizar un seguimiento y actualizar las diferentes series 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);

Answer 2

Prueba este tutorial :

Cuando implementamos visualizaciones en tiempo real de datos de series de tiempo, a menudo usamos el eje x para codificar el tiempo como posición: a medida que el tiempo avanza, los nuevos datos vienen de la derecha y los datos antiguos se deslizan hacia la izquierda. Sin embargo, si usa los interpoladores de trayectoria incorporados de D3, puede ver algún comportamiento sorprendente ...

Para eliminar el movimiento, interpolar la transformación en lugar de la ruta . Esto tiene sentido si piensa que el gráfico visualiza una función: su valor no cambia, solo mostramos una parte diferente del dominio. Al deslizar la ventana visible a la misma velocidad a la que llegan los nuevos datos, podemos mostrar los datos en tiempo real sin problemas ...