Estoy intentando crear un gráfico en tiempo real utilizando 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 suave entre "estados" como la línea que está haciendo una transición a la izquierda.

aquí 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 usar todas las herramientas proporcionadas por nvd3.js.aquí es lo que me gustaría producir usando nvd3

El código interesante para la transición usando 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();

}