D3 График реального времени (визуализация графических данных)

Question

Я хотел бы получить потоковый график, как в этом примере: http://mbostock.github.com/d3/ex/stream.html

но я хотел бы, чтобы данные в режиме реального времени вводились справа, а старые - слева, чтобы у меня всегда было окно из 200 выборок. Как бы я сделал это так, чтобы у меня были соответствующие переходы?

Я попытался изменить точки данных в массиве а затем воссоздать область как таковую

  data0 = d3.layout.stack()(a);

но из-за моих переходов не получается, что график скользит по экрану.

Заранее спасибо.

Answer 1

Попробуйте этот урок:

При реализации отображений данных временных рядов в реальном времени мы часто используем ось X для кодирования времени как положения: по мере того, как время прогрессирует, новые данные поступают справа, а старые данные скользят влево. Однако, если вы используете встроенные в D3 интерполяторы путей, вы можете столкнуться с неожиданным поведением...

Чтобы устранить колебания, интерполируйте преобразование, а не путь. Это имеет смысл, если вы считаете диаграмму визуализирующей функцию - ее значение не меняется, мы просто показываем другую часть домена. Сдвигая видимое окно с той же скоростью, с которой поступают новые данные, мы можем плавно отображать данные в реальном времени...

Answer 2

Вот простой пример: http://jsfiddle.net/cqDA9/1/ Он показывает возможное решение для отслеживания и обновления различных серий данных.

var update = function () {
    for (Name in chart.chartSeries) {
        chart.chartSeries[Name] = Math.random() * 10;
    }
    for (Name in chart2.chartSeries) {
        chart2.chartSeries[Name] = Math.random() * 10;
    }
    setTimeout(update, 1000);
}
setTimeout(update, 1000);