D3.jsでメソッドチェーンで独自処理をする

メソッドチェーンに渡されている要素について独自の処理を行いたいとき、call()メソッドです。call()メソッドのパラメータには関数を指定します。datum()メソッドを以前の記事で説明しましたが、メソッドに関数を指定したとき、データと出現順序が渡されると書きました。ただ、call()メソッドの場合データではなく、要素のセット(データがセットされた要素の塊)が渡されます。

１つの要素なら処理に苦労はあまりないですが、複数の要素が渡された時は、
each()メソッドを使います。each()メソッドにも関数を指定することができ、この関数には要素にセットしたデータの出現順序が渡されます。

実際にこれらのメソッド使ったのが下記のサンプルコードです。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js　callメソッドとeach()メソッドを使ってみる</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>call,each()メソッドを使う</h2>
<pre>
Chromeなら「Ctrl + Shift + I 」か「F12」で
デベロッパーツールを起動して、「console」タブをクリックして
値を確認する
</pre>
	<svg id="graph"></svg>

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

</body>
</html>

<!DOCTYPE html>

<head>

<title>D3.js　callメソッドとeach()メソッドを使ってみる</title>

<style>

svg{

width:320px;

height:240px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

</style>

</head>

<body>

<h2>call,each()メソッドを使う</h2>

<pre>

Chromeなら「Ctrl + Shift + I 」か「F12」で

デベロッパーツールを起動して、「console」タブをクリックして

値を確認する

</pre>

</body>

</html>

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

		var arrData= [ ];                      //データを格納する配列を宣言
		for( var i=0 ; i < data.length ; i++){ //データの行数分だけループする
			arrData.push( data[i]["item1"] );  //item1のラベルのデータだけを抽出
		}

		d3.select("#graph")                    
		.selectAll("rect")                     //rect要素を指定
		.data(arrData)                         //データを要素に連結
		.enter()                               //データの数だけ繰り返し
		.append("rect")                        //データの数だけrect要素を追加

	/*
		function(elements)のelementsには
		要素のセット(データがセットされた要素一式)が格納される
	*/
		.call(function(elements){              //自作関数を呼びだす

		/*
			each(function(d,i)
			d：要素にセットしたデータ
			i：出現順番
			が渡される
		*/
			elements.each(function(d,i){       //要素の数だけ繰り返し
				console.log( i + " = " + d );  //データと要素順を表示
			});
		});
	});

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

var arrData= [ ]; //データを格納する配列を宣言

for( var i=0 ; i < data.length ; i++){ //データの行数分だけループする

arrData.push( data[i]["item1"] ); //item1のラベルのデータだけを抽出

}

d3.select("#graph")

.selectAll("rect") //rect要素を指定

.data(arrData) //データを要素に連結

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

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

function(elements)のelementsには

要素のセット(データがセットされた要素一式)が格納される

.call(function(elements){ //自作関数を呼びだす

each(function(d,i)

d：要素にセットしたデータ

i：出現順番

が渡される

elements.each(function(d,i){ //要素の数だけ繰り返し

console.log( i + " = " + 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