D3.js　JSONデータを読み込む #JavaScript

この記事でやること

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"
    }
]

D3.js JSONデータを読み込む

この記事でやること

ソースコード

HTML

JavaScript

データファイル（JSON）

D3.js　JSONデータを読み込む