メソッドチェーンに渡されている要素について独自の処理を行いたいとき、call()メソッドです。call()メソッドのパラメータには関数を指定します。datum()メソッドを以前の記事で説明しましたが、メソッドに関数を指定したとき、データと出現順序が渡されると書きました。ただ、call()メソッドの場合データではなく、要素のセット(データがセットされた要素の塊)が渡されます。
１つの要素なら処理に苦労はあまりないですが、複数の要素が渡された時は、
each()メソッドを使います。each()メソッドにも関数を指定することができ、この関数には要素にセットしたデータの出現順序が渡されます。
実際にこれらのメソッド使ったのが下記のサンプルコードです。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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 ); //データと要素順を表示 }); }); }); |
|
1 2 3 4 5 6 |
item1,item2,item3 50,60,80 100,180,40 70,40,140 190,120,40 80,160,320 |