D3.js v4/v5 入門③ – データのバインド方法
チュートリアル目次
データのバインド方法
D3は様々なデータ形式に対応していてCSVやJSONなどを読み込むメソッドが用意されていますが、チュートリアルでは簡単化するために次のサンプルデータセットを用意します。
|
1 |
var dataset = [ 1, 2, 3, 4, 5 ]; |
おさらいですが最初のコードは下記です。このコードを編集してデータと要素を紐づけていきたいと思います。
|
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> // ここにコードを書いていきます。 var dataset = [ 1, 2, 3, 4, 5 ]; </script> </body> </html> |
始めに、どの要素に紐づけるかを決める必要があります。
|
1 |
d3.select("body").selectAll("p") |
bodyタグ内のp要素を選択します。
が、選択したいpタグはまだ存在しません。ここにD3独特のメソッドを適用していきます。まだ無い要素を選択して、追加するためのenter()を使います。最終的なメソッドは
|
1 2 3 4 5 |
d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text("Hello!"); |
このようになります。
このメソッドで何をしているかを見ていくと、
|
1 |
d3.select("body") |
ページ内の”body”タグを検索して次のメソッドに参照を渡します。
|
1 |
.selectAll("p") |
参照として渡された”body”内の”p”要素を検索して渡します。まだ存在しないので空の選択を次のメソッドに渡します。
|
1 |
.data(dataset) |
データ数をカウントして解析します。今回は5つの値が設定されます。
|
1 |
.enter() |
データがバインドされた新しい要素を作成するためにはenter()を使う必要があります。このメソッドは、ページの対象とする要素を調べ、次にそれに渡されるデータを調べます。対象とする要素よりも多くのデータ値がある場合、仮の参照場所を作成し、次のメソッドにその参照を渡します。
|
1 |
.append("p") |
enter()によって作成された仮の参照場所を受け取り、”p”要素をページに挿入します。次に、作成した要素への参照を次のメソッドに渡します。
|
1 |
.text("Hello!") |
新しく作成されたpへの参照を取得し、テキスト値を挿入します。
最終的なコードはこのようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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> // ここにコードを書いていきます。 var dataset = [ 1, 2, 3, 4, 5 ]; d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text("Hello!"); </script> </body> </html> |
これを実行すると、Hello!が5つ表示されるはずです。
GoogleChormeのデベロッパーツールでページを解析すると下のようにpタグが5つ追加されていることがわかります。
データの使い方
バインドしたデータの使い方を説明します。
バインドしたデータ
|
1 |
var dataset = [ 1, 2, 3, 4, 5 ]; |
を使うには、下のメソッド内の引数を関数にします。
例えば、
|
1 2 3 4 5 |
d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text("Hello!"); |
の最後の行を
|
1 |
.text(function(d) { return d; }); |
と変えてやります。すると表示が
このように変わります。data()を呼び出した後は、いつでも連鎖させたメソッド内でdを入力として受け入れる関数を作成できます。
javascriptの関数は
|
1 2 3 4 |
function (入力値) { //ここに処理を記載 return 出力値; } |
の形で設定します。D3でデータを用いるときは入力値に必ずdを設定します。入力値にdを設定しないとバインドしたデータを参照することができません。
引数を関数とした場合、例えば次のような処理も可能です。
|
1 2 3 |
.text(function(d) { return "この値は" + d + "です。"; }); |
関数内の処理を変えることで様々なことが可能になります。
属性の設定
attr()やstyle()などのD3の他のメソッドと組み合わせると、HTML属性やCSSプロパティを、設定できるようになります。 たとえば、コードにもう1行追加すると、この結果が得られます。
|
1 2 3 4 5 6 |
d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text(function(d) { return "この値は" + d + "です。"; }) .style("color", "red"); |
すべてのテキストが赤色になりました。ここでも関数を使って、データに応じて色を変えることができます。
|
1 2 3 4 5 6 7 |
.style("color", function(d) { if (d > 2) { // しきい値 2 return "red"; } else { return "black"; } }); |
こんな風に変わりましたでしょうか。
次は、データを描画するためのSVGの基礎について説明します。
チュートリアル目次