D3.js v4/v5 入門② – 要素の追加方法 (append)
チュートリアル目次
要素の追加
最初のステップとして、D3を使って画面に要素を追加していきます。下のコードをbody内のscriptタグに記載します。
|
1 |
d3.select("body").append("p").text("Hello!"); |
このような形になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Test</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> // ここにコードを書いていきます。 d3.select("body").append("p").text("Hello!"); </script> </body> </html> |
index.htmlファイルを再編集する際は、テキストエディタにドロップするか「プログラムから開く」でテキストエディタを選ぶかしてください。編集したらindex.htmlファイルを保存後、Google Chormeでページを更新してください。閉じてしまった場合は、もう一度開きなおしてください。
画面に Hello! という文字が表示されましたでしょうか。また、GoogleChromeのデベロッパーツールで文書の本体を見てみると、<script>タグ内に追加したスクリプトの他に、
|
1 |
<p>Hello!</p> |
が追加されていることがわかると思います。
これがD3で追加した要素です。今は、1つだけの要素を生成しただけですが、これから何10、何100といったデータに対しても同じ操作で要素を追加していきます。
メソッドの詳細
<p>タグを生成するために追加した
|
1 |
d3.select("body").append("p").text("Hello!"); |
このスクリプトを詳細に見ていきます。
jQueryなどと同じように、D3はチェーンと呼ばれる手法を採用しており、メソッド(関数)をピリオド(.)でつなぐことで一行のコードで複数のアクションを実行します。
上のスクリプトは、３つのメソッドに分けることができます。
|
1 2 3 |
d3.select("body") .append("p") .text("Hello!"); |
ちなみに、javascriptでは改行や空白を無視しますので実際にこのようにコードを書いても動作します。
|
1 |
.select("body") |
は、CSSセレクタを入力としてselect()実行すると、一致する最初の要素への参照が返されます。(複数の要素を一度に選択する場合はselectAll()を使用します。このチュートリアルの後半に登場します。）今回の場合は”body”が参照され、次のメソッドに受け渡されます。
|
1 |
.append("p") |
は、指定した要素を生成して(今回は”p”)、参照先内部の最後に追加します。今回はbodyタグ内部の一番最後に、pタグが挿入されています。このメソッドは、生成した新しい要素への参照を次のメソッドに渡します。
|
1 |
.text("Hello!") |
は、指定した文字列を、参照しているタグ内に挿入します。今回は<p>タグと</p>タグの間に”Hello!”を挿入しています。既存のコンテンツは上書きされます。
場合によっては次のように書き直すこともできます。
|
1 2 3 |
var body = d3.select("body"); var p = body.append("p"); p.text("Hello!"); |
多くの関数を呼び出すときなどに用います。
次はデータのバインド方法について説明します。
チュートリアル目次