web-dev-qa-db-ja.com

D3リアルタイムストリームグラフ（グラフデータの視覚化）

この例のようにストリームグラフを希望します。 http://mbostock.github.com/d3/ex/stream.html

enter image description here

しかし、リアルタイムデータを右から入力し、古いデータを左から残すようにしたいので、常に200サンプルのウィンドウがあります。適切なトランジションを得るにはどうすればよいですか？

配列aのデータポイントを変更してから、そのようなエリアを再作成してみました

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

しかし、私の遷移では、グラフが画面上をスライドしているように見えません。

前もって感謝します。

javascriptd3.jsreal-timetransitionstream-graph
20
klyngbaek

試してみてください このチュートリアル ：

時系列データのリアルタイム表示を実装する場合、x軸を使用して時間を位置としてエンコードすることがよくあります。時間が経過すると、新しいデータが右から入り、古いデータが左にスライドします。ただし、D3の組み込み path interpolators を使用すると、驚くべき動作が見られる場合があります...

揺れをなくすには、パスではなく変換を補間します。これは、グラフを関数の視覚化と見なす場合に理にかなっています。その値は変化せず、ドメインの別の部分を示しているだけです。新しいデータが到着するのと同じ速度で可視ウィンドウをスライドさせることにより、リアルタイムデータをシームレスに表示できます...

35
mbostock

以下に簡単な例を示します。 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);
8
Jerm