d3.jsな日々

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

Updateセレクション

d3.jsは、チェイン構文によってメソッドを次々とつないでいく。これは、上から下(あるいは左から右)へバトンを渡すようなイメージだ。
やりたい事を全て一連のチェインにすることも可能だが(その場合、受け渡される「バトン」は見えない)、データの変更がある場合やインタラクティブな描画を行う場合は、途中でいったんバトンを「保留」する方が効率が良い。

要素とデータの関係と、update, enter, exitは下図の関係にある。
f:id:yasuda0404:20130429223645p:plain

Updateセレクションは対応するデータが存在する要素である。

var bars = svg.selectAll("rect")	 //Select all bars
        .data(dataset);	

このUpdateセレクション('bar')について、必要な操作を行う。

bars.enter()
.append("rect")
.......
.......
})

bars.transition()
.duration(500)
.......
.......

bar.enter()
........

こうすることで効率的で、理解しやすいスクリプトになる