いったん描画した図形の一部を更新したい場合は、描画した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); }); });