javascript - Gráfico de línea de tiempo real con nvd3.js

real-time transition

Question

Intento crear un gráfico en tiempo real usando nvd3.js, que se actualizaría periódicamente y con la impresión de que los datos se procesan en tiempo real.

Por ahora he podido crear una función que actualizaría el gráfico periódicamente pero no puedo lograr una transición fluida entre "estados" como la línea que hace una transición hacia la izquierda.

Esto es lo que hice usando nvd3.js, aquí el código interesante es:

d3.select(''#chart svg'')
.datum(data)
.transition().duration(duration)
.call(chart);

Ahora, he podido producir lo que quiero usando d3.js, pero preferiría poder utilizar todas las herramientas provistas por nvd3.js. Esto es lo que me gustaría producir usando nvd3

El código interesante para la transición con d3.js es:

function tick() {
// update the domains
now = new Date();
x.domain([now - (n - 2) * duration, now - duration]);
y.domain([0, d3.max(data)]);
// push the accumulated count onto the back, and reset the count
data.push(Math.random()*10);
count = 0;
// redraw the line
svg.select(".line")
.attr("d", line)
.attr("transform", null);
// slide the x-axis left
axis.transition()
.duration(duration)
.ease("linear")
.call(x.axis);
// slide the line left
path.transition()
.duration(duration)
.ease("linear")
.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
.each("end", tick);
// pop the old data point off the front
data.shift();
}

Answer 1

Es probable que desee ver: D3 en tiempo real streamgraph (Graph Data Visualization) ,

especialmente el enlace de la respuesta: http://bost.ocks.org/mike/path/

En general, veo dos formas de lidiar con el problema de la transición vertical:

• el sobremuestreo tiene una interpolación lineal entre el punto real y el intervalo entre puntos, mientras más "horizontal" se verá la transición vertical (pero el inconveniente es que se obtienen muchos puntos "falsos", que pueden ser inaceptables dependiendo de el uso de la tabla)
• amplíe el gráfico agregando al final, y traduzca el gráfico de la izquierda, asegurándose de que la parte izquierda aún disponible no se muestre hasta que la quite (recorte o haga otro truco), eso es lo mejor, y la solución mencionada anteriormente no lo hace ese