d3.jsでJSONファイルを読み込む

JSON形式は複雑なXML形式と比べてシンプルで、データ容量も少なくて
すむので、ウェブでよく利用されています。JSON形式は
複数のデータは [ ] で囲み、データにラベル付けておく場合は、
{ } の間に「キー名 : 値」のペアを必要なデータ数だけ
「,」(カンマ)で区切って書きます。

[
{ "item" : "りんご" , "sales" : [100,200,300] },
{ "sales : [50,200,100], "item" : "もも" },
{ "sales : [120,240,40], "item" : "なし" },
{ "item" : "みかん" , "sales" : [100,200,300] , "date" : "2016/1/3" },
{ "item" : "ぶどう" , "sales" : [100,200,300] , "note" : "近日発売"}

]

TSV,CSVとは違い、ヘッダーはありません。キー名と値の組合せが
存在するだけです。キー名、値のペアの順序は、入れ替わっても大丈夫です。
上記のように異なる余分なデータが入っていても問題ないです。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>d3.jsでJSONデータを読み込む</title>

	<style>
	svg{
		width:320px;
		height:240px;
		border:2px solid black;
	}
	rect{fill:green;}
	.fillPink{fill:pink;}

	</style>
	<script src="../js/d3.js"></script>

</head>
<body>

	<h2>JSONデータを読み込む</h2>
	<svg id="graph"></svg>

	<script src="test.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>d3.jsでJSONデータを読み込む</title>

<style>

svg{

width:320px;

height:240px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

</style>

</head>

<body>

<h2>JSONデータを読み込む</h2>

</body>

</html>

	/*
		d3.json()メソッドも、TSV,CSV形式の()メソッドと同じ
		引数を使用します。
		d3.json()メソッド
		第１引数：読み込むJSONファイルのURL
		第２引数：ファイル読込完了時に呼ぶ関数

		第１引数に指定したファイルは非同期通信を行う
		XMLHttpRequestオブジェクトにURLのデータが格納されます。	
	*/
	d3.json("test.json",function(error,data){

		var arrData= [ ];

		/*
			JSON形式ではデータの数は配列の要素数なので、
			data.lengthとすることで、データ総数を把握できます。
		*/
		for( var i=0 ; i < data.length ; i++){

		/*
			読み込まれたデータはキー名として参照します。
			salesのキー名の最初の配列のデータを読み込み
			データセット(arrData)に代入しています。
		*/
			arrData.push( data[i].sales[0] );
		}

		//棒グラフを描画する。
		d3.select("#graph")
		.selectAll("rect")
		.data(arrData)
		.enter()
		.append("rect")
		.attr("class","fillPink")
		.attr("width",function(d,i){
			return d;
		})
		.attr("height",16)
		.attr("x",0)
		.attr("y",function(d,i){
			return i * 24;
		});
	});

d3.json()メソッドも、TSV,CSV形式の()メソッドと同じ

引数を使用します。

d3.json()メソッド

第１引数：読み込むJSONファイルのURL

第２引数：ファイル読込完了時に呼ぶ関数

第１引数に指定したファイルは非同期通信を行う

XMLHttpRequestオブジェクトにURLのデータが格納されます。

d3.json("test.json",function(error,data){

var arrData= [ ];

JSON形式ではデータの数は配列の要素数なので、

data.lengthとすることで、データ総数を把握できます。

for( var i=0 ; i < data.length ; i++){

読み込まれたデータはキー名として参照します。

salesのキー名の最初の配列のデータを読み込み

データセット(arrData)に代入しています。

arrData.push( data[i].sales[0] );

}

//棒グラフを描画する。

d3.select("#graph")

.selectAll("rect")

.data(arrData)

.enter()

.append("rect")

.attr("class","fillPink")

.attr("width",function(d,i){

return d;

})

.attr("height",16)

.attr("x",0)

.attr("y",function(d,i){

return i * 24;

});

[
	{ "item" : "りんご" , "sales" : [ 100, 240, 300] },
	{ "sales" : [ 50, 200, 100], "item" : "もも" },
	{ "sales" : [ 120, 240, 40], "item" : "なし" },
	{ "item" : "みかん" , "sales" : [ 100, 100, 200] , "date" : "2016/1/3" },
	{ "item" : "ぶどう" , "sales" : [ 300, 200, 100] , "note" : "近日発売"}

]

[

{ "item" : "りんご" , "sales" : [ 100, 240, 300] },

{ "sales" : [ 50, 200, 100], "item" : "もも" },

{ "sales" : [ 120, 240, 40], "item" : "なし" },

{ "item" : "みかん" , "sales" : [ 100, 100, 200] , "date" : "2016/1/3" },

{ "item" : "ぶどう" , "sales" : [ 300, 200, 100] , "note" : "近日発売"}

]