データの追加と更新

データの追加処理

要素にデータを追加してグラフを表示するプログラムは何度も出てきています。データの数に応じて要素を追加するにはenter()メソッドを使います。実際に要素を追加するにはappned()メソッドですが、その直前にenter()メソッドを書かないとデータの数に応じて追加されないことは、以前の記事で紹介しました。

データの更新処理

ボタンに対応したCSVファイルを用意して、読み込んでグラフを表示します。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js　ボタンをクリックしてグラフを更新</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>D3.js　ボタンをクリックしてグラフを更新</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"] );
			}
		/*
			D3.jsでグラフを更新するには、下記のように更新する要素の
			セットを変数に代入します。data()メソッドはデータを
			セットした後、対応する要素のセットを返却する
		*/
			var graphData = d3.select("#graph")
							.selectAll("rect")
							.data(arrData);
		/*
			変数graphDataには要素がセットされたので、データの数に応じて
			要素を追加する場合のプログラムを用意します。graphdataの後に、
			メソッドチェーンを使いenter()とグラフの描画処理を行う
		*/
			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;
			});
		/*
			データ更新は下記で行います。横棒グラフの場合、
			dataが読み込まれて変化するのは横幅のみです。なので、
			下記のようにattr()メソッド使いwidthの属性値します。
		*/
			graphData
			.attr("width",function(d,i){
				return d;
			});
		/*
			上記のように、データ追加処理とデータ更新処理を
			別々に書く必要があります。
		*/

		});
	});

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"] );

}

D3.jsでグラフを更新するには、下記のように更新する要素の

セットを変数に代入します。data()メソッドはデータを

セットした後、対応する要素のセットを返却する

var graphData = d3.select("#graph")

.selectAll("rect")

.data(arrData);

変数graphDataには要素がセットされたので、データの数に応じて

要素を追加する場合のプログラムを用意します。graphdataの後に、

メソッドチェーンを使いenter()とグラフの描画処理を行う

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;

});

データ更新は下記で行います。横棒グラフの場合、

dataが読み込まれて変化するのは横幅のみです。なので、

下記のようにattr()メソッド使いwidthの属性値します。

graphData

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

return d;

});

上記のように、データ追加処理とデータ更新処理を

別々に書く必要があります。

});

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
270,30,200
230,60,120

item1,item2,item3

190,120,40

100,180,240

50,60,80

270,30,200

230,60,120

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

item1,item2,item3

240,130,80

150,80,40

140,90,140

190,120,80

40,280,190