d3.jsな日々

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

データの追加・削除

データの追加・削除は、

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()	;

必要に応じて、スケーリングも再設定する