TSV,CSVファイルのヘッダー名が英語であるとは限りません。
日本語で書かれたりすることもあります。
この場合の対処方法を書いていきます。日本語が含まれているときは、
javaScriptの連想配列(ハッシュ)を使うと簡単に処理できます。
他のデータ項目を呼びだす時は、data[i]["東京"]の["東京"]の部分を
呼び出したいデータ項目のヘッダー名を指定します。
サンプルコードの実行結果はこちら
|
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>TSVファイル日本語ヘッダーを読み込む</title> <script src="../js/d3.js"></script> <style> svg{ width:320px; height:240px; border:2px solid black; } rect{fill:green;} .fillPink{fill:pink;} </style> </head> <body> <h2>日本語ヘッダーを読み込む</h2> <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 |
d3.csv("test.csv",function(error,data){ var arrData = []; for( var i=0 ; i < data.length ; i++){ arrData.push(data[i]["神奈川"]); } //棒グラフを描画する。 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; }); }); |
日本語のヘッダー名をrow()()メソッドで処理する
D3.jsでは別の方法を使って日本語のヘッダー名を処理することができます。
d3.csv()メソッドの第２引数を関数を指定しましたが、これを
指定しないようにします。代わりに、ヘッダー部分の名称を変更する処理を
行うrow()メソッドをメソッドチェーンに加えます。
d3.csv(...).row()と書き指定します。row()メソッドのパラメーターに
ヘッダ処理を行う関数を指定します、
サンプルコードの実行結果はこちら
サンプルhtmlファイルは、上記のhtmlファイルと同一の物ですので、
サンプル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 47 48 49 50 51 52 53 |
d3.csv("test.csv") /* row()は行単位のデータ(実際はデータを含んだオブジェクト)が 渡されていて、この関数からの戻り値は以下のように 「graph1: d["東京"] 」とすることで日本語ヘッダーを graph1として参照できるようにします。 */ .row(function(d){ return { graph1: d["東京"], graph2: d["神奈川"], graph3: d["千葉"] /* graph1: d["東京"] /2, graph2: d["神奈川"] /2, graph3: d["千葉"] /2 */ } }) /* 上記のように日本語ヘッダーを英文字に変えると、 下記のように、以前の記事で紹介したような方法で CSVデータを配列に格納できます。 メソッドチェーンにget()メソッドを追加し、引数には、 CSVファイルを読込が完了した際に実行する関数を指定する。 */ .get(function(error,data){ var arrData = []; for( var i=0 ; i < data.length ; i++){ arrData.push(data[i].graph3); } //棒グラフを描画する。 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; }); }); |
row()メソッド内でデータ加工をする
row()メソッドは他にも、予めデータに変更咥えたい場合も
利用することができます。上記のサンプルコードの15～19行目の箇所の
コメントアウトを消し、12～14行目の箇所をコメントにすると
棒グラフが半分の長さになります。
今回はCSV形式でrow()メソッドとget()メソッドの例を書きましたが、
TSV形式でも、row()メソッドとget()メソッドを使うことができます。