1

私は d3.js の単純な折れ線グラフの例を扱っていましたが、データが更新された場合に新しい線に合わせてグラフを調整できるように、x 軸と y 軸のドメインを動的に調整する方法を考えていました。これが、これらのドメインを設定する現在のコード (と思います) です。

var x = d3.scale.linear().domain([-15, 15]).range([0, w]);

var y = d3.scale.linear().domain([0, 120]).range([h, 0]);

現在、ドメインの値は任意です。変数 w と h は、svg 要素の幅と高さです。

どんな助けでも大歓迎です。

4

1 に答える 1

1

まず、ドメインの下限と上限を、データセットから計算された動的な値に設定します。構造またはデータに応じて、d3には、値の配列内の最大/最小値を計算するメソッドがありますmax。min

var x = d3.scale.linear().domain([d3.min(data), d3.max(data)]).range([0,w]);

データを更新する方法がある場合は、機能を追加して再定義し（関数の全範囲でアクセスできるある種の名前空間xにアタッチしたい場合があります）、ラインジェネレーターを呼び出します（を介して）。xd3.svg.line()

アップデート

あなたのコメントを見て、はっきりさせておきます。

d3は非常に低レベルのライブラリであるため、これを行うにはいくつかの異なる方法があります（個人的には魅力の一部だと思います）。私自身の仕事では、他の種類のグラフ（棒グラフなど）で使用されている一般的なEnter、Update、Exitモデルを便利に使用できる複数のシリーズを使用しています。しかし、最も基本的な用語では、必要なものは次のとおりです。

  1. 最初にいくつかのオブジェクトを設定する必要があります。
    • SVGコンテナ
    • xとyのスケール
    • データにバインドされていないラインジェネレータ

  2. 次に、そのラインジェネレーターを使用しSVG:pathて、データセットで要素を初期化します
  3. 次に、要素を更新する手段を作成し、SVG:path新しいデータでスケーリングする必要があります

これを示すjsfiddleは、10秒間、毎秒新しいランダムデータを追加します。

于 2012-09-25T13:19:11.260 に答える