【d3.js】JSONデータを読み込む方法

code

.jsonファイルからデータを読み込む方法をご紹介します。

d3.json() メソッドを使いますが、v5から使い方が少し変更されています。

.jsonファイルのサンプル

サンプルで、このような .jsonファイルを用意します。

{
  "Employee":[
    {"name":"Sato","age":41},
    {"name":"Suzuki","age":33},
    {"name":"Tanaka","age":24}
  ]
}

HTML/JavaScriptサンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
svg{
}
</style>
<script src="d3.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>

// jsonファイル読み込み

d3.json("data.json").then(function(data) {

    console.log(data);

    console.log(data.Employee[0]["name"]);
    console.log(data.Employee[0]["age"]);
    console.log(data.Employee[1]["name"]);
    console.log(data.Employee[1]["age"]);
    console.log(data.Employee[2]["name"]);
    console.log(data.Employee[2]["age"]);

}).catch(function(error){
     // handle error    
});

</script>

d3.json()メソッドを使って、jsonファイルからデータを読み込みます。


v5ではコールバックではなく、Promisesが返却されるので以下のような書き方になります。

// jsonファイル読み込み

d3.json("data.json").then(function(data) {

   // handle

}).catch(function(error){
     // handle error    
});

Debug用コンソール

.jsonファイルが読み込まれた後、オブジェクト型で返ってくるので、デバッグで配列の中身をみてみます。

// データの準備

d3.json("data.json").then(function(data) {

    console.log(data);

}).catch(function(error){
     // handle error    
});

ブラウザのデバックコンソールの出力。

JSONオブジェクト型で返ってきています。

今度は、JSONオブジェクトの各データにアクセスして、デバックしてみます。

// データの準備

d3.json("data.json").then(function(data) {

    console.log(data.Employee[0]["name"]);
    console.log(data.Employee[0]["age"]);
    console.log(data.Employee[1]["name"]);
    console.log(data.Employee[1]["age"]);
    console.log(data.Employee[2]["name"]);
    console.log(data.Employee[2]["age"]);

}).catch(function(error){
     // handle error    
});

JSONの各データ要素にアクセスできました。

まとめ

以上、d3.jsでJSONファイルを読み込むサンプルでした。

関連情報

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA