この記事でやること
- D3.jsでCSV形式のデータを読み込みます
- 元データ：CSVファイル（別ファイルに分割）
- ファイルはUTF-8で記述しましょう
- 読み込んだデータを一行ずつ表示します
ソースコード
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js CSVファイルを読み込む</title>
</head>
<body>
<!-- 一覧表の描画先-->
<div id="data"></div>
</body>
<!-- D3.js -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- 本体処理 -->
<script src="main.js"></script>
</html>
JavaScript
main.js
// 読み込みデータファイル
var DATA_FILE_PATH = './data.csv';
// 一覧描画先
var TARGET_ELEMENT_ID = '#data';
// 項目名：漢字表記
var COL_KANJI = 'kanji';
// 項目名：かな表記
var COL_KANA = 'kana';
// 項目名：色ID
var COL_COLOR_ID = 'color';
drawTable();
/**
* データ一覧の描画
*/
function drawTable() {
d3.csv(DATA_FILE_PATH, function(error, list){
// 第2引数のlistの中に読み込んだデータがある
d3.select(TARGET_ELEMENT_ID)
.append('div')
.selectAll()
.data(list)
.enter()
.append('div')
.text(function (dataRow) {
// 読み込んだデータを参照する場合はコールバック関数を通す
return dataRow[COL_KANJI]
+ '（' + dataRow[COL_KANA] + '）'
+ '：' + dataRow[COL_COLOR_ID];
});
});
}
データファイル（CSV）
一行目がデータ項目名になり、これをキーとしてスクリプト内で取得を行います。
data.csv
kanji,kana,color
青,あお,blue
赤,あか,red
緑,みどり,green
結果
読み込んだ内容がテキストで表示され…特に何も面白くないでしょうか？
今は別ファイルのデータを読み込むことができた点を素直に喜びましょう。