データの追加・削除は、
dataset.push(newNumber); //データセットの最後にnewNumberを追加 dataset.pop(); //データセットの最後の要素を削除 dataset.shift(); //データセットの最初の要素を削除、全要素をひとつずつ前へ
を用いる。
要素を追加・削除したデータセットを、再度バインドする。
var bars = svg.selectAll("rect") .data(dataset);
要素を追加した場合は.enter().append()で新しいSVG要素を追加、要素を削除した場合は.exit()で余ったエレメントを削除する
bars.enter() //References the enter selection (a subset of the update selection) .append("rect") //Creates a new rect .attr("x", w) .attr("y", function(d) { //Sets the y value, based on the updated yScale return h - yScale(d); }) .attr("width", xScale.rangeBand()) //Sets the width value, based on the updated xScale .attr("height", function(d) { //Sets the height value, based on the updated yScale return yScale(d); }) .attr("fill", function(d) { //Sets the fill value return "rgb(0, 0, " + (d * 10) + ")"; }); bars.exit() ;
必要に応じて、スケーリングも再設定する