D3 Real-Time streamgraph (визуализация графических данных)

Мне нужен граф потока, как в этом примере: http://mbostock.github.com/d3/ex/stream.html

enter image description here

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

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

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

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

Спасибо заранее.

Ответы

Ответ 1

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

При реализации отображения временных рядов в реальном времени мы часто используем ось x для кодирования времени как позиции: по мере продвижения времени новые данные поступают справа, а старые данные выходят влево. Однако, если вы используете встроенный D3s path interpolators, вы можете увидеть какое-то удивительное поведение...

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

Ответ 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);