データの削除

データの削除処理を書いていきます。前回の記事のサンプルコードだとデータ数と要素数が一致するときのみ適正に動作します。読み込まれたデータの数が増減するときは、動作しません。

今回必要な処理は、
データが減ったときは横棒を削除する処理を追記する必要があります。D3.jsでは、exit()メソッドを使うことで、対応するデータがなくなった要素を処理することができます。
「処理する」となぜ表現したのかというと、exit()メソッドには削除機能はなく、以後に続くメソッドチェーンで要素の削除処理を行うためです。このようにしているのは、要素削除時、アニメーションを使えるようにするためです。
実際に要素を削除するにはremove()メソッドを使います。

表示先要素
.selectAll(SVG要素)
.data(データセット)
.exit()
.remove()

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>各CSVファイルのデータ数が異なるもの更新</title>

	<style>
	svg{
		width:320px;
		height:240px;
		border:2px solid black;
	}
	rect{fill:green;}
	.fillPink{fill:pink;}

	</style>
	<script src="../js/d3.js"></script>

</head>
<body>

	<h2>読み込むデータにより表示するグラフを変更</h2>
	<div>
		<button data-src="data1.csv">data1.csvを読み込む</button>
		<button data-src="data2.csv">data2.csvを読み込む</button>
		<button data-src="data3.csv">data3.csvを読み込む</button>
	</div>

	<svg id="graph"></svg>

	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>各CSVファイルのデータ数が異なるもの更新</title>

<style>

svg{

width:320px;

height:240px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

</style>

</head>

<body>

<h2>読み込むデータにより表示するグラフを変更</h2>

<div>

<button data-src="data1.csv">data1.csvを読み込む</button>

<button data-src="data2.csv">data2.csvを読み込む</button>

<button data-src="data3.csv">data3.csvを読み込む</button>

</div>

</body>

</html>

	d3.selectAll("button").on("click",function(){
		var csvFile = this.getAttribute("data-src");

		d3.csv( csvFile, function(error,data){

			var arrData = [];
			for( var i=0 ; i < data.length ; i++ ){
				arrData.push( data[i]["item1"] );
			}

			graphData = d3.select("#graph")
						.selectAll("rect")
						.data(arrData);
			
			graphData.enter()
			.append("rect")

			.attr("class","fillPink")
			.attr("width", function(d,i){
				return d;
			})
			.attr("height",24)
			.attr("x",0)
			.attr("y",function(d,i){
				return i * 28;
			});

			graphData
			.attr("width",function(d,i){
				return d;
			});

		/*
			データ削除が行われる場合
		*/
			graphData
			.exit()    //削除対象の要素を抽出
			.remove(); //要素ごと削除する
		});
	});

d3.selectAll("button").on("click",function(){

var csvFile = this.getAttribute("data-src");

d3.csv( csvFile, function(error,data){

var arrData = [];

for( var i=0 ; i < data.length ; i++ ){

arrData.push( data[i]["item1"] );

}

graphData = d3.select("#graph")

.selectAll("rect")

.data(arrData);

graphData.enter()

.append("rect")

.attr("class","fillPink")

.attr("width", function(d,i){

return d;

})

.attr("height",24)

.attr("x",0)

.attr("y",function(d,i){

return i * 28;

});

graphData

.attr("width",function(d,i){

return d;

});

データ削除が行われる場合

graphData

.exit() //削除対象の要素を抽出

.remove(); //要素ごと削除する

});

item1,item2,item3
50,60,80
100,180,40
70,40,140
190,120,40
80,160,320

item1,item2,item3

50,60,80

100,180,40

70,40,140

190,120,40

80,160,320

item1,item2,item3
190,120,40
100,180,240
50,60,80
70,140,140
270,30,200
230,60,120

item1,item2,item3

190,120,40

100,180,240

50,60,80

70,140,140

270,30,200

230,60,120

item1,item2,item3
240,130,80
150,80,40
80,140,270
140,90,140
190,120,80
40,280,190
290,50,40

item1,item2,item3

240,130,80

150,80,40

80,140,270

140,90,140

190,120,80

40,280,190

290,50,40