D3.js v4/v5 入門③ – データのバインド方法

2018-02-18

チュートリアル目次

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

データのバインド方法

D3は様々なデータ形式に対応していてCSVやJSONなどを読み込むメソッドが用意されていますが、チュートリアルでは簡単化するために次のサンプルデータセットを用意します。

おさらいですが最初のコードは下記です。このコードを編集してデータと要素を紐づけていきたいと思います。

始めに、どの要素に紐づけるかを決める必要があります。

bodyタグ内のp要素を選択します。

が、選択したいpタグはまだ存在しません。ここにD3独特のメソッドを適用していきます。まだ無い要素を選択して、追加するためのenter()を使います。最終的なメソッドは

このようになります。

このメソッドで何をしているかを見ていくと、

ページ内の”body”タグを検索して次のメソッドに参照を渡します。

参照として渡された”body”内の”p”要素を検索して渡します。まだ存在しないので空の選択を次のメソッドに渡します。

データ数をカウントして解析します。今回は5つの値が設定されます。

データがバインドされた新しい要素を作成するためにはenter()を使う必要があります。このメソッドは、ページの対象とする要素を調べ、次にそれに渡されるデータを調べます。対象とする要素よりも多くのデータ値がある場合、仮の参照場所を作成し、次のメソッドにその参照を渡します。

enter()によって作成された仮の参照場所を受け取り、”p”要素をページに挿入します。次に、作成した要素への参照を次のメソッドに渡します。

新しく作成されたpへの参照を取得し、テキスト値を挿入します。

最終的なコードはこのようになります。

これを実行すると、Hello!が5つ表示されるはずです。

GoogleChormeのデベロッパーツールでページを解析すると下のようにpタグが5つ追加されていることがわかります。

データの使い方

バインドしたデータの使い方を説明します。

バインドしたデータ

を使うには、下のメソッド内の引数を関数にします。

例えば、

の最後の行を

と変えてやります。すると表示が

このように変わります。data()を呼び出した後は、いつでも連鎖させたメソッド内でdを入力として受け入れる関数を作成できます。

javascriptの関数は

の形で設定します。D3でデータを用いるときは入力値に必ずdを設定します。入力値にdを設定しないとバインドしたデータを参照することができません。

引数を関数とした場合、例えば次のような処理も可能です。

関数内の処理を変えることで様々なことが可能になります。

属性の設定

attr()やstyle()などのD3の他のメソッドと組み合わせると、HTML属性やCSSプロパティを、設定できるようになります。 たとえば、コードにもう1行追加すると、この結果が得られます。

すべてのテキストが赤色になりました。ここでも関数を使って、データに応じて色を変えることができます。

こんな風に変わりましたでしょうか。

次は、データを描画するためのSVGの基礎について説明します。

 

チュートリアル目次

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