20

この例のようなストリーム グラフが必要です: http://mbostock.github.com/d3/ex/stream.html

ここに画像の説明を入力

しかし、リアルタイム データを右から入力し、古いデータを左から残して、常に 200 サンプルのウィンドウを確保したいと考えています。適切な遷移が得られるようにするにはどうすればよいですか?

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

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

しかし、私のトランジションでは、チャートが画面上をスライドしているようには見えません。

前もって感謝します。

4

2 に答える 2

35

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

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

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

于 2012-03-12T12:31:00.197 に答える
8

簡単な例を次に示します: 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);
于 2013-12-07T01:09:40.380 に答える