データの変更

いったん描画した図形の一部を更新したい場合は、描画したsvgセレクションの一部の属性を変更する。
例えば、下のように、SVGセレクションを定義し、そこにグラフを描いているとする。

//Create SVG element
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);  

//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
	return xScale(i);
})
.attr("y", function(d) {
	return h - yScale(d);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
	return yScale(d);
})
.attr("fill", function(d) {
	return "rgb(0, 0, " + (d * 10) + ")";
});

このグラフのデータのY数値を、pセクションのクリックをトリガーにして変更することを考える。この場合、SVG要素すべてを書きなおす必要はない。すでに定義したSVG属性のうち、変更したいもののみ再定義すれば良い。

• .selectAll(rect)で、グラフ要素rectを取得

• .data()で、新たな数値をバインド

• .attr()で、Y属性を変更

と言う手順になる。
最初の描画と違い、すでに図形要素rectは存在しているので、.enter()は不要である。

//On click, update with new data			
d3.select("p")
.on("click", function() {
    //New values for dataset
    dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
	          5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ];
    //Update all rects
    svg.selectAll("rect")
        .data(dataset)
        .attr("y", function(d) {
	    return h - yScale(d);
         })
       .attr("height", function(d) {
	    return yScale(d);
        });		
});