読者です 読者をやめる 読者になる 読者になる

ほんとのこと知りたいだけなのに。

夏休みはもうおわり。

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

(2) selectAll

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

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

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

See Also

(3) data

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

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

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

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

See Also

(4) enter

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

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

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

Value

Returns the enter selection

See Also

(5) append

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

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

See Also

おわり

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

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

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

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