График реального времени с nvd3.js

Я пытаюсь создать график реального времени, используя 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();

}

Ответы

Ответ 1

Вероятно, вы захотите посмотреть: D3 Real-Time streamgraph (визуализация графических данных),

особенно ссылка ответа: http://bost.ocks.org/mike/path/

В общем, я вижу два способа решения проблемы вертикального перехода:

  • избыточная выборка, имеющая некоторую линейную интерполяцию между реальной точкой, и чем меньше интервал между точками, тем больше будет "горизонтальный" вертикальный переход (но недостатком является то, что вы получаете много "ложных" точек, что может быть неприемлемо в зависимости от использования диаграммы).
  • расширьте диаграмму, добавив в конце и переведя диаграмму слева, убедившись, что оставшаяся доступная левая часть не отображается, пока вы ее не удалите (обрезать или сделать какой-либо другой трюк), что лучше, и решение упомянутое выше, делает это