0

d3jsを使用して下のグラフを再作成しようとしています

私はこの質問に沿って従おうとしていますD3js-複数の折れ線グラフを作成して簡単に更新しますが、d3jsのドキュメントに関連するすべてのもので想定されているように見えるいくつかの基本が欠けています:

  1. d3jsは実際にどのように何かを描画しますか?データセットを実際にループする場所はどこですか?
  2. ドメインと範囲、これは私のせいです。グラフの基本を確認する必要がありますが、d3がそれを処理すると想定していました。この例では、これは実際にはどういう意味ですか?

    var w = 25,
    h = 200;
    
    var x = d3.scale.linear()
       .domain([0, 1])
       .range([0, w]);
    

これは実際にd3.scale.linearメソッドに何を伝えていますか?

3)最終的には、1〜100(またはそれ以上)のデータを使用して、数値が高くなるにつれてY軸が増加し、日付が進むにつれてX軸が増加する上記のグラフを作成したいと思います。そのデータは、キーと値のペアでどのようにフォーマットされますか?

4)d3は、すべてのJS命令をレイヤーのように単純にスタックしますか?これは1)の拡張です、私はそれがどのように何かをレンダリングするかを実際には理解していません。SVGについての何か

4

1 に答える 1

2

何が起こっているのかをよりよく理解するために、 d3チュートリアルのいくつかを参照することをお勧めします。特定の質問については、以下を参照してください。

  1. ループすることはなく、データを(存在しない可能性のある)要素にバインドし、変更、新規、および削除された要素の選択(つまりサブセット)を操作することによって機能します。たとえば、このチュートリアルを参照してください。
  2. メソッドはd3.scale.*グラフスケールを作成します。つまり、入力値を出力値(グラフ内の座標)にマップします。d3.scale.linear()名前が示すように、線形スケールを作成します。
  3. 本当に好きな方法でデータをフォーマットできます。繰り返しになりますが、例についてはチュートリアルをご覧ください。
  4. 1を参照してください。
于 2012-12-28T18:09:41.130 に答える