D3.jsのデータと要素の対応

D3.jsがどのようにして読み込んだデータと表示する要素を
対応させているかを書いていきます。

D3.jsはデータを対応する要素の__data__プロパティに
格納しているだけです。D3.jsはデータを動的に処理するので、
プログラム内にグラフ操作を行うデータを保持せずに、
要素__data__プロパティに入れておき処理を行っています。

データセットを対応する要素に設定するのが、data()メソッドです。
data()メソッドを呼びだしただけではデータが設定されるだけで
対応する要素の追加・削除・更新は行われません。
要素の追加を行うにはenter()メソッド、
要素の削除を行うにはexit()メソッドを利用します。

これらのメソッドを利用したデータ更新処理は
別の記事で説明します。

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

<!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>
	<svg id="graph"></svg>

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

	<pre>
data()メソッドを利用しデータを設定したとき、
__data__プロパティに値が入っているかどうか確認する。<br>
手順(Chromeの場合)：
１．「Ctrl + Shift+ I 」か「f12」を押し、
	デベロッパーツールを起動する。
２．「Elements」タブをクリックして、最初のrect要素を選択する
３．「Styles」「Event Listener」「DOM Breakpoints」
	「Properties」の中で「Properties」を選択する。
４．「rect」をクリックする。
	</pre>
</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>

<pre>

data()メソッドを利用しデータを設定したとき、

__data__プロパティに値が入っているかどうか確認する。<br>

手順(Chromeの場合)：

１．「Ctrl + Shift+ I 」か「f12」を押し、

デベロッパーツールを起動する。

２．「Elements」タブをクリックして、最初のrect要素を選択する

３．「Styles」「Event Listener」「DOM Breakpoints」

「Properties」の中で「Properties」を選択する。

４．「rect」をクリックする。

</pre>

</body>

</html>

	d3.csv("test.csv",function(error,data){

		var arrData= [ ];

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

		//棒グラフを描画する。
		d3.select("#graph")
		.selectAll("rect")
		.data(arrData)
		.enter()
		.append("rect")
		.attr("class","fillPink")
		.attr("width",function(d,i){
			return d;
		})
		.attr("height",16)
		.attr("x",0)
		.attr("y",function(d,i){
			return i * 24;
		});
	});

d3.csv("test.csv",function(error,data){

var arrData= [ ];

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

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

}

//棒グラフを描画する。

d3.select("#graph")

.selectAll("rect")

.data(arrData)

.enter()

.append("rect")

.attr("class","fillPink")

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

return d;

})

.attr("height",16)

.attr("x",0)

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

return i * 24;

});

上記を実行していただくといつものグラフが表示されます。
その状態で、__data__プロパティを確認します。

手順(Chromeの場合)：
１．サンプルコードを実行しグラフが表示された状態にする。
２．「Ctrl + Shift+ I 」か「f12」を押し、
デベロッパーツールを起動する。
３．「Elements」タブをクリックして、最初のrect要素を選択する
４．「Styles」「Event Listener」「DOM Breakpoints」
「Properties」の中で「Properties」を選択する。
５．「rect」をクリックする。

要素内部のプロパティの一番上に「__data__」があります。
これがD3.jsのdata()メソッドで追加されたプロパティとデータです。
データは「60」と書いてあります。item2の１番目のデータである
「60」と一致します。２つ目以降のrect要素をクリックしていくと、
CSVデータの並びと同様に「180」「40」「120」「160」と入っています。

要素の__data__プロパティに値が入っているのであれば、
自作プログラムを作成して値を代入することも可能です。ですが、
D3.jsにはdatum()メソッドがあるので自作する必要はありません。
datum()メソッドを利用すると、要素データに値を代入できます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js　datum()メソッドを利用して値を代入</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>datum()()メソッドを利用して値を代入</h2>
	<svg id="graph"></svg>

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

</body>
</html>

<!DOCTYPE html>

<head>

<title>D3.js　datum()メソッドを利用して値を代入</title>

<style>

svg{

width:320px;

height:240px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

</style>

</head>

<body>

<h2>datum()()メソッドを利用して値を代入</h2>

</body>

</html>

	d3.csv("test.csv",function(error,data){

		var arrData= [ ];

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

		//棒グラフを描画する。
		d3.select("#graph")
		.selectAll("rect")
		.data(arrData)
		.enter()
		.append("rect")
		/*
			datum()メソッドを使って、
			直接値を代入する
		*/
		.datum(280)
/*		.datum(function(){
			return Math.random();
		})
*/
		.attr("class","fillPink")
		.attr("width",function(d,i){
			return d;
		})
		.attr("height",16)
		.attr("x",0)
		.attr("y",function(d,i){
			return i * 24;
		});
	});

d3.csv("test.csv",function(error,data){

var arrData= [ ];

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

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

}

//棒グラフを描画する。

d3.select("#graph")

.selectAll("rect")

.data(arrData)

.enter()

.append("rect")

datum()メソッドを使って、

直接値を代入する

.datum(280)

/* .datum(function(){

return Math.random();

})

.attr("class","fillPink")

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

return d;

})

.attr("height",16)

.attr("x",0)

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

return i * 24;

});

datum()メソッドは、パラメーターに数値や文字列だけではなく、
関数を指定することができます。メソッドチェーンで使うメソッドの
パラメーターに関数をシテイルのがD3.jsでは大事です。
上記のサンプルコードの21～24行目のコメントアウトされた箇所を
消して、HTMLファイルを更新をかけると、乱数値が__data__に
設定されます。

datum()メソッドでは、メソッドに関数を指定しましたが、この関数には
２つのパラメーターが渡されています。上記のサンプルでは、渡される
パラメーターは使わないので省きました。データを受け取るための変数を
書かなくてもプログラムは動きます。

D3.jsではメソッドに関数を指定することができ、
関数には２つのパラメータが渡されます。
１番目のパラメーターは要素(データ)の出現順番、
この順番は０から始まり、１ずつ増えていきます。３番目のデータなら２です。
書いていると分かり難いので下記のサンプルコードを実行して、
デベロッパーツールを起動して、「console」タブをクリックしてみましょう。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js　datum()メソッドを利用して値を代入</title>
	<script src="../js/d3.js"></script>

</head>
<body>

	<h2>デベロッパーツールの「console」タブで値を確認する</h2>
	<svg id="test"></svg>
	<script src="test.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>D3.js　datum()メソッドを利用して値を代入</title>

</head>

<body>

<h2>デベロッパーツールの「console」タブで値を確認する</h2>

</body>

</html>

	d3.select("#test")
	.selectAll("rect")           //rect要素を選択
	.data(["V","E","S","H","A"]) //データを要素に連結
	.enter()                     //データの数だけ繰り返す
	.append("rect")              //データの数だけrect要素を追加
	.datum(function(d,i){
		console.log( i + " = " + d  ); //順番とデータ内容を出力
		return d;                      //設定するデータを返却
	});

d3.select("#test")

.selectAll("rect") //rect要素を選択

.data(["V","E","S","H","A"]) //データを要素に連結

.enter() //データの数だけ繰り返す

.append("rect") //データの数だけrect要素を追加

.datum(function(d,i){

console.log( i + " = " + d ); //順番とデータ内容を出力

return d; //設定するデータを返却

});

0 = V
1 = E
2 = S
3 = H
4 = A

と出力されます。