前回までは、予めプログラム内に書かれた数値を
もとにして棒グラフを表示しました。
実際にD3.jsを使う場合はプログラム内にデータを用意して
おくというのはまずないと思います。多くの場合は、
データは別ファイルを用意されています。
D3.jsではXML,JSON,TSV,CSVなど、色々なデータタイプに対応して
います。独自の形式でも大丈夫です。ファイルの詳しいやり方は
別の機会にします。
今回はCSV(カンマ区切りテキスト)ファイルを読み込んで
棒グラフを表示します。
test.csvの中身
item01,item02,item03
50,60,80
100,180,40
70,40,140
190,120,40
80,160,320
D3.jsでCSVファイルを読み込むにはd3.csv()メソッドを使います。
第1引数にはファイルのパスを指定し、第2引数にはCSVファイルの
読込が完了したときに読み出す関数を指定します。
この読み込みが完了したときに呼ばれる関数の
第1引数には、エラー情報
第2引数には、読み込まれたデータ(オブジェクト)が渡されます。
サンプルコードの実行結果はこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>CSVファイルを読み込んで棒グラフを作成する</title> <style> #sampleGraph rect{ stroke:#dd0000; stroke-width:2px; fill:#0000dd; } </style> <script src="../js/d3.js"></script> </head> <body> <h1>CSVファイルからデータを読み込んで値をグラフを表示する</h1> <svg id="sampleGraph"> </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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
d3.csv("test.csv",function(error,data){ //データを格納する配列を用意 var dataSet =[]; for( var i = 0 ; i < data.length; i++){ /* データの行数分だけループ処理 item01のラベルのデータだけを取り出し dataSet[]に値を格納する 読み込まれたCSVファイルの内容は変数dataに 格納されています。dataにはCSVのヘッダーを除いた 行数分のデータが格納されています。 data.lengthとするとすべてのデータの行数を 知ることができます。 */ dataSet.push(data[i].item1); /* dataSet.push()は配列の末尾に データを押し込むメソッドです。 追加するデータはdata[i].item1としています。 このitem1という文字列は、CSVファイルのヘッダーの 項目名です。item2なら,item2欄のデータを読み込む ことができます。 */ } d3.select("#sampleGraph") .selectAll("rect") .data(dataSet) .enter() .append("rect") .attr("x", 0 ) .attr("y", function(d,i){ return i * 32; }) .attr("height","24px") .attr("width" , function(d,i){ return d + "px"; }); }); |