D3.js data使い方(enter, update, exit)
D3の基本、dataの使い方を紹介します。
|
1 2 |
dataset = [1, 2, 3, 4, 5, 6]; var div = d3.selectAll("div").data(dataset); |
とすると”div”要素にデータが割り当てられます。
例えばdiv要素がない状態で
|
1 2 3 4 5 6 |
d3.selectAll("div") .data(dataset) .enter() .append("div") .style("color", "red") .text(function(d){return "this data is " + d;}); |
とすると、データの個数分のdiv要素が生成されます。
下のように、div要素がすでに2つある状態で、
|
1 2 3 4 5 6 |
d3.selectAll("div") .data(dataset) .enter() .append("div") .style("color", "red") .text(function(d){return "this data is " + d;}); |
とすると、
のように、新しく生成された要素が更新されます。新しく生成された部分をenter領域、すでにある部分をupdate領域と言います。
このupdate領域のデータを更新するためには、下のようにします。
|
1 2 3 4 |
d3.selectAll("div") .data(dataset) .style("color", "blue") .text(function(d){return "this data is " + d;}); |
update領域とenter領域のスタイルを同時に変更したい場合が多いと思いますが、そのようなときは、次のようにすると一括で変更することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var div = d3.selectAll("div") .data(dataset); var divEnter = div .enter() .append("div"); var divUpdate = divEnter.merge(div); divUpdate .style("color", "blue") .text(function(d){return "this data is " + d;}); |
一方で、すでに上のように6つのdiv要素があり、割り当てる方のデータが少ない場合、exitを使って余分な要素の領域を指定することができます。
|
1 2 3 4 5 6 7 8 |
dataset = ['A', 'B']; var div = d3.selectAll("div") .data(dataset) .style("color", "red") .text(function(d){return "this data is " + d;}); div.exit() .style("color", "green"); |
exit領域のデータは消去することがほとんどですので
|
1 |
div.exit().remove(); |
として消去してやります。
まとめ
dataはD3のキーとなる部分ですので押さえておきたいところです。