CSVファイルを読み込んでデータを出力する（1行に複数のデータがある場合）

説明

D3.jsでCSVファイルを読み込んでデータを出力するにはd3.csv()メソッドを使います。最初のパラメーターに読み込むCSVファイルのパスを指定します。2番目のパラメーターにCSVファイルを読み込んだ場合に呼び出す関数を指定します。関数にはエラー情報と読み込んだデータが渡されます。今回読み込むCSVファイルの内容は1行に複数のデータがある場合です。（下記参照）
data()メソッドでCSVデータを読み込んだ後、再度data()メソッドを使って1行ごとにデータを取り出します。これはdata()メソッドに関数を指定し、関数内でd3.entries()メソッドを使ってデータを返します。以後データはkey, valueプロパティでアクセスすることができるようになります。このため、データを出力する際にtext()メソッドに関数を指定し関数内で渡されたデータ（オブジェクト）のvalueプロパティを返せば、CSVファイルに書かれた複数の項目が出力されます。

サンプル [サンプルを実行する]　[サンプルをダウンロード]

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<style>
table,td { border : 1px solid black; }
</style>
<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", function(error, list){
	d3.select("#result")	// div#result内に出力
	.append("table")	// table要素を追加
	.selectAll("tr")	// tr要素を対象にする
	.data(list)	// 出力するデータ
	.enter()	// データ数だけ要素を生成
	.append("tr")
	.selectAll("td")
	.data(function(row){	// 1行ごとに処理
		return d3.entries(row);
	})
	.enter()
	.append("td")
	.text(function(d){	// データ内容を出力
		return d.value;
	})
});

data.csvデータ

名前,国語,数学,社会
赤羽,100,20,80
井の頭,30,80,40
宇野,20,75,50
江田島,45,65,80
尾辻,65,55,40
加藤,30,80,90
木下,65,85,75