最近、D3.js フレームワークの使い方を学び始めましたが、まさに私が望んでいることを実現するように設計されているように思えますが、「ライブ」更新グラフの簡単な例を見つけることができません。
新しいデータが利用可能になると更新される折れ線グラフのようなものを探しています。新しいデータは、「最終表示」タイムスタンプ付きの json URL にアクセスするか、その他の AJAX 系のメソッドを実行することで取得されます。
編集：答えの D3 の部分はここにあります:
http://bost.ocks.org/mike/path/
さて、サーバーからクライアントに新しいデータを取得するにはどうすればよいでしょうか?
ベストアンサー1
このチュートリアルは、リアルタイムの折れ線グラフを作成するのに非常に役立ちます。http://bost.ocks.org/mike/path/
さらにいくつかコメントを追加したいと思います。
非同期データ
リアルタイム グラフを作成する場合、多くの場合、データは非同期で取得されるため、各「ポイント」間の正確な時間を知ることはできません。
line行については、チュートリアルで説明されている内容では気にしないので幸運です。- 継続時間でスムーズな遷移効果を得るには、少しコツが必要です。重要なのは、継続時間を最後のフレームと前のフレームの間の時間に設定することです。ネットワークのスループットはほぼ常に同じなので、これは次のフレームの近似値としても適しています。
Y軸
従来の折れ線グラフでは、y ドメインを決定するのは簡単です。ただし、ライブ データでは、y 値が制限外になることがよくあります。このため、各反復で y ドメインを設定する関数を呼び出すことをお勧めします。境界ボックスを作成することもできます。
パフォーマンス
データは常に追加されるため、使用しなくなった値は削除する必要があることに十分注意してください。そうしないと、データが重くなり続け、アニメーション全体がクラッシュする可能性があります。