説明
D3.jsでCSVファイルの1行目の項目名（ヘッダーのラベル名）を付け直すにはrow()メソッドを利用します。CSVファイルは多く利用されていますが、日本で使用されるデータは最初の1行目（ヘッダー部分）が日本語のカテゴリ、ジャンルになっていることがあります。以下のサンプルでは事業所と売り上げという項目になっています。グラフ表示処理やデータ加工処理部分を再利用したい場合に、ラベル名がデータごとに異なっていると、その都度プログラムを少し変更しなければなりません。そのような場合、CSVファイルを読み込み、最初にデータを加工し扱いやすくする（特定のデータだけを抜き出す）ことができます。
D3.jsではd3.csv()メソッドを使ったCSVファイルを読み込ませた後、row()メソッドを使ってデータの加工を行うことができます。row()メソッドには関数を指定することができ、この関数ではCSVファイルの1行単位でデータの処理を行います。関数にはエラーとデータの2つのパラメーターが渡されます。関数内でデータを処理したらreturnで加工したデータを返します。単純な数値や文字列だけでなくJavaScriptオブジェクトリテラル、JSON形式などで返すこともできます。
なお、row()メソッドは加工するだけなので加工したデータを処理するにはサンプルのようにget()メソッドを使う必要があります。
HTMLソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="result"></div>
<script src="js/sample.js"></script>
</body>
</html>
JavaScriptコード
d3.csv("data/data.csv")
.row(function(d){ // 行単位で読み込んで処理
// 1行目が日本語なので安全のためラベル名など割り当て直す
return { label : d["事業所"], value : d["売り上げ"] }
})
.get(function(error, data){ // 加工したデータを取得
var text = "";
for(var i=0; i<data.length; i++){ // 全データを連結
text += data[i].label + " = " + data[i].value + "<br>";
}
d3.select("#result").html(text); // 画面に表示
})
data.csvファイルの内容
事業所,売り上げ
a,10
b,20
c,50
d,6
e,80
f,33
g,42
h,72
i,90
j,25