D3.js 要素の追加 - append()

select, append, text
Tags:

要素の追加

D3を使用して画面へ要素を追加する方法について説明する。

次のコードを<script>タグ内に記述すると、<body>タグの中に<p>タグが追加される。

d3.select("body").append("p").text("Hello!");

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
  </head>
  <body>
    <script>
      // ここにコードを記述する。
      d3.select("body").append("p").text("Hello!");
    </script>
  </body>
</html>

ファイルを上記のように修正して保存した後、Google Chromeでページを更新する。

画面にHello!という文字が表示されただろうか。

また、Google Chromeの開発者ツールで文書の本文を見ると、<script>タグに追加したスクリプトのほかに、次のように<p>タグが追加されていることがわかる。

<p>Hello!</p>

D3.js 要素の追加

ここまで、D3で要素を追加する方法について見てきた。ここでは1つの要素だけを追加したが、今後は10個、100個のデータに対して要素を追加する方法についても説明する。

メソッドの詳細

<p>タグを生成するために追加した次のスクリプトを詳しく見てみる。

d3.select("body").append("p").text("Hello!");

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

上のスクリプトは3つのメソッドに分けられる。

d3.select("body")
  .append("p")
  .text("Hello!");

なお、JavaScriptでは改行や空白は無視されるため、実際にこのようにコードを書いても動作する。

select()にCSSセレクターを入力して実行すると、最初に一致した要素への参照が返される。

.select("body")

複数の要素を一度に選択する場合はselectAll()を使用する。これは後半で説明する。ここではbodyが参照され、次のメソッドへ渡された。

次に、指定した要素を生成し、ここでは"p"を生成して、参照先の内部の最後に追加する。

.append("p")

今回は<body>タグ内部のいちばん最後に<p>タグが挿入される。このメソッドは、生成した新しい要素への参照を次のメソッドへ渡す。

さらに次のメソッドであるtext()は、指定した文字列を参照先のタグへ挿入する。

.text("Hello!")

ここでは<p>タグと</p>タグの間に"Hello!"を挿入している。既存の内容は上書きされる。

場合によっては、チェーンを使わずに次のように書き換えることもできる。

var body = d3.select("body");
var p = body.append("p");
p.text("Hello!");

多くの関数を呼び出す場合などに使用する。