D3.js の基本がどうも理解できていないので整理してみる。

これまで D3.js を何度が利用することはあったがほとんどコピペだった。

それでも十分動くんだけど、個々の命令やその動作について理解できていない。

使いこなす必要が出てきそうなので整理してみる。

やること

まずやること。 内容はシンプル。 rect を追加するだけ。

下図の左の状態を右の状態にする。

実行前

<svg id="d3">
    // ここに
    // rect要素を三つ
    // 追加します。
</svg>

実行後

<svg id="d3">
    <rect></rect>  // __data__ = 1
    <rect></rect>  // __data__ = 2
    <rect></rect>  // __data__ = 3
</svg>

コード と説明

次はコード。こんだけ。

d3.select("div#d3")
  .selectAll('rect') // 追加対象の要素を指定する。
  .data([1, 2, 3])   // 追加対象のデータを指定する。
  .enter()           // データの個数分以下の処理をする。
  .append("rect")    // rect要素(<rect></rect>)をdiv#d3に追加する。

(1) select

要素を追加する先の要素を指定する。

See Also

• d3.select(selector)
• selection.select(selector)

(2) selectAll

追加対象の要素を選択する。 これを実行した段階ではまだ rect 要素は追加されていない。

この命令が一番わかりにくい。 どうやら 引数のselector で指定した要素を取得してどこかに保持するみたい。

(恐らく)ここで選択した要素と、次で指定するデータを突き合わせて追加/変更削除するんじゃなかろうか。

See Also

• d3.selectAll(selector)
• selection.selectAll

(3) data

追加する rect 要素のデータを指定する。

イメージとしてはここで指定された個数の rect 要素が追加される。

まだここでも rect 要素は追加されていない。

(恐らく)ここでデータと要素がバインドされるんかな。

See Also

• selection.data
• selection.data([data[, key]])
• quadtree.data()

(4) enter

data メソッドで指定されたデータの個数分これ以降のメソッドチェーンの処理を繰替えす。

まだここでも rect 要素は追加されていない。

Common Lisp で言うところの dolist みたいなものだろう。

Value

Returns the enter selection

See Also

• selection.enter()

(5) append

select メソツドで指定した要素(svg#g3)に rect 要素を追加する。

ここで初めて rect 要素が作成され追加される。

See Also

• selection.append(type)

おわり

ざっと眺めてみたんだけど、やはりしっくりこない。

以下の二種類についての構成/仕組みが理解できていないからかな。というように感じた。

• データをバインドする。
• 各命令の戻り値。

次回はそのあたりを整理したいな。