Ich versuche, mit nvd3.js ein Echtzeitdiagramm zu erstellen, das regelmäßig aktualisiert wird und den Eindruck erweckt, dass die Daten in Echtzeit verarbeitet werden.

Im Moment war ich in der Lage, eine Funktion zu erstellen, die die Grafik regelmäßig aktualisiert, aber es ist mir nicht möglich, einen reibungslosen Übergang zwischen "Zuständen" wie der Linie zu erzielen, die einen Übergang nach links ausführt.

Hier habe ich mit nvd3.js gemacht, hier ist der interessante Code:

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

Jetzt konnte ich mit d3.js produzieren, was ich wollte, aber ich würde es vorziehen, alle von nvd3.js bereitgestellten Tools verwenden zu können.Hier ist das, was ich mit nvd3 produzieren möchte

Der interessante Code für den Übergang mit d3.js lautet:

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

}