D3.js v4/v5 入門② – 要素の追加方法 (append)

2018-02-18

チュートリアル目次

  1. 環境準備
  2. 要素の追加方法
  3. データのバインド方法
  4. SVGの基礎
  5. グラフの書き方

要素の追加

最初のステップとして、D3を使って画面に要素を追加していきます。下のコードをbody内のscriptタグに記載します。

このような形になります。

index.htmlファイルを再編集する際は、テキストエディタにドロップするか「プログラムから開く」でテキストエディタを選ぶかしてください。編集したらindex.htmlファイルを保存後、Google Chormeでページを更新してください。閉じてしまった場合は、もう一度開きなおしてください。

画面に Hello! という文字が表示されましたでしょうか。また、GoogleChromeのデベロッパーツールで文書の本体を見てみると、<script>タグ内に追加したスクリプトの他に、

が追加されていることがわかると思います。

これがD3で追加した要素です。今は、1つだけの要素を生成しただけですが、これから何10、何100といったデータに対しても同じ操作で要素を追加していきます。

メソッドの詳細

<p>タグを生成するために追加した

このスクリプトを詳細に見ていきます。

jQueryなどと同じように、D3はチェーンと呼ばれる手法を採用しており、メソッド(関数)をピリオド(.)でつなぐことで一行のコードで複数のアクションを実行します。

上のスクリプトは、3つのメソッドに分けることができます。

ちなみに、javascriptでは改行や空白を無視しますので実際にこのようにコードを書いても動作します。

は、CSSセレクタを入力としてselect()実行すると、一致する最初の要素への参照が返されます。(複数の要素を一度に選択する場合はselectAll()を使用します。このチュートリアルの後半に登場します。)今回の場合は”body”が参照され、次のメソッドに受け渡されます。

は、指定した要素を生成して(今回は”p”)、参照先内部の最後に追加します。今回はbodyタグ内部の一番最後に、pタグが挿入されています。このメソッドは、生成した新しい要素への参照を次のメソッドに渡します。

は、指定した文字列を、参照しているタグ内に挿入します。今回は<p>タグと</p>タグの間に”Hello!”を挿入しています。既存のコンテンツは上書きされます。

場合によっては次のように書き直すこともできます。

多くの関数を呼び出すときなどに用います。

次はデータのバインド方法について説明します。

 

チュートリアル目次

  1. 環境準備
  2. 要素の追加方法
  3. データのバインド方法
  4. SVGの基礎
  5. グラフの書き方