Я пытаюсь создать график в реальном времени, используя nvd3.js, который будет периодически обновляться и создается впечатление, что данные обрабатываются в реальном времени.

На данный момент мне удалось создать функцию, которая периодически обновляла бы график, но у меня не получилось получить плавный переход между "состояния" как линия делает переход влево.

Вот это то, что я сделал с помощью nvd3.js, вот интересный код:

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

Теперь я смог произвести то, что хочу, используя d3.js, но я бы предпочел использовать все инструменты, предоставляемые nvd3.js.Вот это то, что я хотел бы произвести с использованием nvd3

Интересный код для перехода с использованием d3.js:

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

}