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

説明

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

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

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.tsv("data/data.tsv", 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.tsvデータ

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