69

私は最近、D3.js フレームワークの使用方法を学び始めました。まさに私がやりたいことを行うように設計されているように見えますが、「ライブ」更新グラフの簡単な例を見つけることができません。

新しいデータが利用可能になると更新される折れ線グラフのようなものを探しています。新しいデータは、「最後に表示された」タイムスタンプまたはその他の AJAX-y メソッドで json URL をヒットすることによって取得されます。

編集：答えのD3部分はここにあります：

http://bost.ocks.org/mike/path/

では、サーバーからクライアントに新しいデータを取得するにはどうすればよいでしょうか?

4

3 に答える 3

38

このチュートリアルは、リアルタイムの折れ線グラフを作成するのに大いに役立ちます: http://bost.ocks.org/mike/path/

さらにいくつかのコメントを追加したいと思います。

非同期データ

リアルタイム グラフを作成する場合、データを非同期で取得することが多いため、各「ポイント」間の正確な時間を知ることができません。

  • lineラインについては、チュートリアルで説明されているものは気にしないのでラッキーです。
  • 継続時間にスムーズなトランジション効果を持たせるには、より注意が必要です。重要なのは、デュレーションを最後のフレームと前のフレームの間の時間に設定することです。ネットワークのスループットはほぼ常に同じであるため、これは次の近似値にも適しています。

Y軸

従来の折れ線グラフでは、y ドメインを決定するのは簡単です。ただし、ライブ データでは、y の値が制限を超えることがよくあります。これが、反復ごとに y ドメインを設定する関数を呼び出すことをお勧めする理由です。境界ボックスを作成することもできます。

パフォーマンス

データは常に追加されるため、もう使用しない値を削除する必要があるという事実に非常に注意する必要があります。そうしないと、データが重くなり続け、アニメーション全体がクラッシュする可能性があります。

于 2013-04-09T05:31:28.410 に答える
28

このプラグインは面白いかもしれません: Cubism .

Cubism.jsは、時系列を視覚化するための D3 プラグインです。Cubism を使用して、より優れたリアルタイム ダッシュボードを構築し、Graphite、Cube、およびその他のソースからデータを取得します。Cubism は、GitHub の Apache License の下で利用できます。

もう 1 つの興味深いプロジェクトは、同じくD3 を活用するRickshawです。

インタラクティブなリアルタイム グラフを作成するための JavaScript ツールキット

この例を参照してください:将来のランダム データ

于 2013-07-12T11:42:03.380 に答える
16

これらはほんの 2 つの例です。

  1. クライアントに定期的にサーバーから新しいデータを取得させることができます(つまり、いくつかの AJAX 呼び出しを使用します)。
  2. ブラウザーがサポートしている場合は、サーバーに対して websocket を開くことができます。これにより、サーバーは新しいデータが利用可能になるとすぐに直接プッシュできます。

どちらを選択するかは、予想される接続数、データの更新速度、サポートする予定のブラウザーなど、多くの変数によって異なります。

いずれにせよ、d3.js ライブラリはデータの取得方法ではなく、データの表示方法に関与します。

于 2012-10-06T23:56:53.047 に答える