D3.jsでデータを変更する

前回の記事で、横棒グラフを表示しました。
今回は、ボタンを押したら動的にデータを変更して、
その結果を即座にグラフに反映させるプログラムを書きます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js ボタンを押してグラフのデータを更新する</title>

	<style>
	svg{
		width:400px;
		height:300px;
		border:solid 1px green;
	}
	/*
		rect要素で設定するstyleプロパティ
		ここでのプロパティはSVG用の物です。
	*/
	#sampleGraph rect{
		stroke:#900000;
		stroke-width:2px;
		fill:#c0c0c0;
	}
	</style>
	<script src="../js/d3.js"></script>
</head>
<body>
	<h1>棒グラフ(一本)をD3.jsを使って表示します。</h1>

	<button style="display:block;margin-bottom:16px;"
			id="updataGraph">データ更新</button>
	<svg id="sampleGraph"></svg>

	<!-- グラフを表示する命令が
		 書かれたJSファイルを読み込む -->
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>D3.js ボタンを押してグラフのデータを更新する</title>

<style>

svg{

width:400px;

height:300px;

border:solid 1px green;

}

rect要素で設定するstyleプロパティ

ここでのプロパティはSVG用の物です。

#sampleGraph rect{

stroke:#900000;

stroke-width:2px;

fill:#c0c0c0;

}

</style>

</head>

<body>

<h1>棒グラフ(一本)をD3.jsを使って表示します。</h1>

<button style="display:block;margin-bottom:16px;"

id="updataGraph">データ更新</button>

<!-- グラフを表示する命令が

書かれたJSファイルを読み込む -->

</body>

</html>

	var dataSet = [250,100,50,20,300];

	d3.select("#sampleGraph")  //SVG要素を指定
	.selectAll("rect")         //SVGで四角形を示す要素を指定
	.data(dataSet)             //データを設定
	.enter()                   //データ数に応じ、rect要素を生成
	.append("rect")            //SVG四角形を生成
	.attr("x",0)               //棒グラフの表示場所　X座標
	.attr("y",function(d,i){
		return i * 32;
	})                         //棒グラフの表示場所　Y座標
	.attr("width",function(d,i){
		return d +"px";
	})  					   //棒グラフの横幅　変数dataSet[0]の値
	.attr("height","24px");    //棒グラフの高さ

	//前回のコードに下記の処理を追加

	//データ更新ボタンをクリックしたとき
	d3.select("#updataGraph")
	/*
		on()メソッド
		第１引数：イベント名を文字列で指定
				　クリックの場合は"click"
		第２引数：イベントが発生したときに
				　呼ばれる関数を指定する。
	*/
	.on("click",function(){

		var dataSet = [50,170,30,220,100];
		/*
			今回は、appendやenterメソッドは不要です。
			データセットの総数が５個で、変更前と
			変わらないからです。詳しくは別の記事で
			説明します。
		*/
		d3.select("#sampleGraph")
		.selectAll("rect")
		.data(dataSet)
		.attr("width",function(d,i){
			return d + "px";
		})
	});

var dataSet = [250,100,50,20,300];

d3.select("#sampleGraph") //SVG要素を指定

.selectAll("rect") //SVGで四角形を示す要素を指定

.data(dataSet) //データを設定

.enter() //データ数に応じ、rect要素を生成

.append("rect") //SVG四角形を生成

.attr("x",0) //棒グラフの表示場所　X座標

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

return i * 32;

}) //棒グラフの表示場所　Y座標

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

return d +"px";

}) //棒グラフの横幅　変数dataSet[0]の値

.attr("height","24px"); //棒グラフの高さ

//前回のコードに下記の処理を追加

//データ更新ボタンをクリックしたとき

d3.select("#updataGraph")

on()メソッド

第１引数：イベント名を文字列で指定

　クリックの場合は"click"

第２引数：イベントが発生したときに

　呼ばれる関数を指定する。

.on("click",function(){

var dataSet = [50,170,30,220,100];

今回は、appendやenterメソッドは不要です。

データセットの総数が５個で、変更前と

変わらないからです。詳しくは別の記事で

説明します。

d3.select("#sampleGraph")

.selectAll("rect")

.data(dataSet)

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

return d + "px";

})

});

名前のある関数と無名関数

javascriptでは、名まえのある関数とない関数を使うことがっでき
関数を定義するときは、以下のようにかきます。

function 関数名(){ 定義内容 }

上記の場合関数が呼ばれない限り実行されません。
Scriptが読み込まれたときに優先的に定義されます。

それに対し以下のように関数名を省くと、
関数定義ではなく関数式として処理されます。

function(){ 定義内容 }

上記の場合、そのまま書くとプログラムが動きませんが、
以下のようにすると動きます。

var f = function(){ return 10; }