この記事でやること
- D3.jsでJSON形式のデータを読み込みます
- 元データ：JSONファイル（別ファイルに分割）
- ファイルはUTF-8で記述しましょう
- 読み込んだデータを一行ずつ表示します
ソースコード
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js JSONファイルを読み込む</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
d3.json()で読み込みを行った時点でJavaScriptオブジェクトとしての扱いとなります。
この例ならばdata()に配列部分を渡すようにするなどして、階層の変更に対応すれば良いということになります。
main.js
// 読み込みデータファイル
var DATA_FILE_PATH = './data.json';
// 一覧描画先
var TARGET_ELEMENT_ID = '#data';
// 項目名：漢字表記
var COL_KANJI = 'kanji';
// 項目名：かな表記
var COL_KANA = 'kana';
// 項目名：色ID
var COL_COLOR_ID = 'color';
drawTable();
/**
* データ一覧の描画
*/
function drawTable() {
d3.json(DATA_FILE_PATH, function(error, root) {
// 第2引数のrootが読み込んだJSONの最上位になる
// ここでは色関連情報の配列を取得した形になる
d3.select(TARGET_ELEMENT_ID)
.append('div')
.selectAll()
.data(root)
.enter()
.append('div')
.text(function (dataRow) {
// 読み込んだデータを参照する場合はコールバック関数を通す
return dataRow[COL_KANJI]
+ '（' + dataRow[COL_KANA] + '）'
+ '：' + dataRow[COL_COLOR_ID];
});
});
}
データファイル（JSON）
data.json
[
{
"kanji": "青",
"kana": "あお",
"color": "blue"
},
{
"kanji": "赤",
"kana": "あか",
"color": "red"
},
{
"kanji": "緑",
"kana": "みどり",
"color": "green"
}
]