CSVファイルの1行目の項目名(ヘッダーのラベル名)を付け直す

説明

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