D3.js v5 入門|#4 円の描画

d3.js の Tutorials「Three Little Circles」 を参考にして、円の描画を行います。
以下では、要素の追加、更新、削除を順を追って行います。

1.要素の追加

まずは、svg要素のみ定義されたhtmlに、次の3つの円を追加します。

Demoを表示

1−1.ソースコード

円を追加するには次のようにします。

1−2.詳細

JavaScriptの各処理について見ていきます。


ここでは、svg要素を選択して子要素の全てのcircle要素を選択しています。
ただしhtmlには、svg要素のみ定義しているため現時点ではcircle要素はありません。
circle要素はこれから追加されます。


追加するデータを配列で定義しています。今回は半径として使用します。


新規追加した要素をDOMに反映します。
この記述をしないと、追加されるcircle要素はDOMに反映されません。


円を要素を追加します。(dataで指定された配列分追加)


属性(cy)はy座標を指定します。


属性(cx)はx座標を指定します。
今回は、x座標の値を匿名関数で指定しています。

引数 d と i ですが

d:dataでバインドした値が格納されています。
i:インデックス値が格納されています。

今回の匿名関数の処理では、インデックスによりx座標を 100 ずつずらしています。


属性(r)で円の半径を指定します。
今回使用した匿名関数は、dataでバインドした各データを返します。

2.要素の更新

次に、4つの円を描画して、1で描画した円を更新します。
描画すると次のようになります。

Demoを表示

2−1.ソースコード

2−2.詳細

JavaScriptの各処理について見ていきます。
大まかな部分は、1と同様なのでポイントのみ見ていきます。


更新用のデータを指定します。


新たに追加される要素にのみ適用したい設定を行います。
3つの円がある状態から、4つの円を描画しているため、最初に描画した3つの円のcircle要素が再利用(更新)されます。
そのため、不足分の1つの円のみ追加されます。
Demoを見ると追加された4つ目の円にのみ変更が適用されています。


merge関数を使って、追加・更新要素の両方に属性やstyleを設定しています。
merge関数を使用しない場合、更新された要素への変更は、DOMに反映されません。

3.要素の削除

次に、2つの円を描画して1で描画した円を更新します。
描画すると次のようになります。

Demoを表示

3−1.ソースコード

3−2.詳細

JavaScriptの各処理について見ていきます。
大まかな部分は、1、2と同様なのでポイントのみ見ていきます。


更新用のデータを指定します。


circle要素が3つ→2つに減ったため、1つcircle要素が余ってしまいます。
data関数では、余った要素の削除は行わないため、不要な要素がある場合は明示的に削除する必要があります。
もし、削除しない場合は、DOMに残り続けます。

4.まとめ

data関数を使用して、円を描画しました。
描画については、3の例の通り

① データの結合(data)
② 不要な要素の削除(remove)
③ データの追加(enter)
④ 再利用・追加データの更新(merge)

を行うと、もれなく要素をDOMに反映することができます。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする