d3.jsな日々

d3.jsでデータ可視化する際の覚書です

ノード、セレクション、データバインド

ノードまたはエレメントとは、タグのペアで指定する要素
セレクションは、指定されたノードを操作するメソッドを持つ、配列のサブクラスである。

selectAll()と、function()は対応し、ループ処理と同等の処理が可能になる
処理内でデータ要素を使いたい場合は、function(d)
処理内でインデックスを使いたい場合は、function(d,i)
を使う

例1. すべてのp要素のフォントサイズを12ptにする

d3.select("#TEXT3").selectAll("p")
     .style("font-size", function() { return 12 + "px"; });

さらに、各ノードに対し、データ要素をバインドできる。これは、selectAll()の直後に、.data()を挿入する
例2. 各p要素のフォントサイズを、.data(配列)で指定した大きさにする

d3.select("#TEXT3").selectAll("p")
     .data([ 11, 13, 16, 20, 26, 32])
     .style("font-size", function(d) { return d + "px"; });