縦棒グラフにアニメーションを付ける

グラフを効果的に見せるためにアニメーションを使います。縦棒グラフをアニメーションさせます。D3.jsでのアニメーションは下記のように行います。

１．attr(),style()メソッドでアニメーション開始時の数値を設定
２．transition()メソッドの後にattr(),style()メソッドでアニメーション終了時の値を設定

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

D3.jsでは下記のメソッドを使い、アニメーションに関する時間を設定します。

メソッド	詳細
duration(ミリ秒)	アニメーション開始から終了までの時間
delay(ミリ秒)	アニメーション開始までの待機時間

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js　縦棒グラフを表示する</title>

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


	/*
		縦棒グラフにラベルを表示する設定
	*/
	.barNum{
		font-size:10px;
		text-anchor:middle;
	}
	
	.axis text{
		font-family:sans-serif;
		font-size:11px;
	}
	.axis path,
	.axis line{
		fill:none;
		stroke:green;
	}
	.axisX line{
		fill:none;
		stroke:black;
	}
	.barName{
		font-size:9px;
		text-anchor:middle;
	}
	</style>
	<script src="../js/d3.js"></script>

</head>
<body>
	<h2>縦棒グラフを表示</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>D3.js　縦棒グラフを表示する</title>

<style>

svg{

width:320px;

height:340px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

縦棒グラフにラベルを表示する設定

.barNum{

font-size:10px;

text-anchor:middle;

}

.axis text{

font-family:sans-serif;

font-size:11px;

}

.axis path,

.axis line{

fill:none;

stroke:green;

}

.axisX line{

fill:none;

stroke:black;

}

.barName{

font-size:9px;

text-anchor:middle;

}

</style>

</head>

<body>

<h2>縦棒グラフを表示</h2>

</body>

</html>

	var svgWidth  = 320  //svg要素の幅
	var svgHeight = 320; //svg要素の高さ
	var xOffset = 40;    //Ｘ座標のずれ具合
	var yOffset = 10;    //Ｙ座標のずれ具合
	var bar;             //棒グラフの棒の要素を格納

	var arrData = [120,80,150,200,110,260,220,40,100];
	var maxNum = 300;
	var barWidth = 20;
	var barMargin = 5;

	//棒グラフを描画
	bar = d3.select("#graph")
		.selectAll("rect")
		.data(arrData);

	bar.enter()
	.append("rect")
	.attr("class", "fillPink")

	//アニメーションの初期値０を設定
	.attr("height",0) 

	.attr("width",barWidth)
	.attr("x",function(d,i){
		return i * (barWidth + barMargin) + xOffset;
	})
	//グラフの一番下に座標を設定
	.attr("y", svgHeight - yOffset )

	//アニメーションをする
	.transition()
	.duration(1200)

	/*
		縦棒グラフの左側から
		アニメーションを開始するように設定する
	*/
	.delay(function(d,i){
		return i * 120;
	})
	.attr("y",function(d,i){  //Y座標を指定
		return svgHeight - d - yOffset; //Y座標を計算
	})
	.attr("height",function(d,i){
		return d;
	})


	//棒グラフの数値を描画する
	bar.enter()              //text要素を指定
	.append("text")          //text要素を追加
	.attr("class","barNum")  //CSSクラスを指定
	.attr("x",function(d,i){ //Ｘ座標を指定
		return i * (barWidth + barMargin) + 10 + xOffset;  //棒グラフの表示間隔に合わせる
	})
	.attr("y", svgHeight -5 - yOffset )//Ｙ座標を指定
	.text(function(d,i){     //データを表示
		return d;
	});

	//目盛り表示の為の縮尺表示
	var yScale = d3.scale.linear()
				.domain([0,maxNum])
				.range([maxNum,0]);

	d3.select("#graph")
	.append("g")
	.attr("class","axis")
	.attr("transform", "translate(" + xOffset + ", " + ((svgHeight - 300)- yOffset) + ")")
	.call(
		d3.svg.axis()
		.scale(yScale)
		.orient("left")
		
	/*	.ticks(20)
		.tickValues( [10.50,30.36,50,100,200,300] )
		.tickFormat(d3.format(".2f"))
	*/	
	);

	//横方向の線を表示する
	d3.select("#graph")
	.append("rect")
	.attr("class","axisX")
	.attr("width",300)
	.attr("height",1)
	.attr("transform","translate(" + xOffset + ", " + (svgHeight - yOffset ) + ")" );

	//棒のラベルを表示する
	bar.enter()
	.append("text")
	.attr("class","barName")
	.attr("x",function(d,i){
		return i * 25 + 10 + xOffset;
	})
	.attr("y", svgHeight - yOffset + 15 )

	/*
		下記のコードは、ラベルはtext要素を追加することで表示します。
		棒グラフ内にデータを表示します。今回のデータセットには、
		データ内にラベル名の情報は含まれていません。
		以下のようにすると、配列に表示するラベルの文字を格納しておき
		順場に応じて返すようにします。
	*/
	.text(function(d,i){
		return ["A","B","C","D","E","F","G","H","I"][i];
	});

100

101

102

103

104

105

106

107

108

var svgWidth = 320 //svg要素の幅

var svgHeight = 320; //svg要素の高さ

var xOffset = 40; //Ｘ座標のずれ具合

var yOffset = 10; //Ｙ座標のずれ具合

var bar; //棒グラフの棒の要素を格納

var arrData = [120,80,150,200,110,260,220,40,100];

var maxNum = 300;

var barWidth = 20;

var barMargin = 5;

//棒グラフを描画

bar = d3.select("#graph")

.selectAll("rect")

.data(arrData);

bar.enter()

.append("rect")

.attr("class", "fillPink")

//アニメーションの初期値０を設定

.attr("height",0)

.attr("width",barWidth)

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

return i * (barWidth + barMargin) + xOffset;

})

//グラフの一番下に座標を設定

.attr("y", svgHeight - yOffset )

//アニメーションをする

.transition()

.duration(1200)

縦棒グラフの左側から

アニメーションを開始するように設定する

.delay(function(d,i){

return i * 120;

})

.attr("y",function(d,i){ //Y座標を指定

return svgHeight - d - yOffset; //Y座標を計算

})

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

return d;

})

//棒グラフの数値を描画する

bar.enter() //text要素を指定

.append("text") //text要素を追加

.attr("class","barNum") //CSSクラスを指定

.attr("x",function(d,i){ //Ｘ座標を指定

return i * (barWidth + barMargin) + 10 + xOffset; //棒グラフの表示間隔に合わせる

})

.attr("y", svgHeight -5 - yOffset )//Ｙ座標を指定

.text(function(d,i){ //データを表示

return d;

});

//目盛り表示の為の縮尺表示

var yScale = d3.scale.linear()

.domain([0,maxNum])

.range([maxNum,0]);

d3.select("#graph")

.append("g")

.attr("class","axis")

.attr("transform", "translate(" + xOffset + ", " + ((svgHeight - 300)- yOffset) + ")")

.call(

d3.svg.axis()

.scale(yScale)

.orient("left")

/* .ticks(20)

.tickValues( [10.50,30.36,50,100,200,300] )

.tickFormat(d3.format(".2f"))

);

//横方向の線を表示する

d3.select("#graph")

.append("rect")

.attr("class","axisX")

.attr("width",300)

.attr("height",1)

.attr("transform","translate(" + xOffset + ", " + (svgHeight - yOffset ) + ")" );

//棒のラベルを表示する

bar.enter()

.append("text")

.attr("class","barName")

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

return i * 25 + 10 + xOffset;

})

.attr("y", svgHeight - yOffset + 15 )

下記のコードは、ラベルはtext要素を追加することで表示します。

棒グラフ内にデータを表示します。今回のデータセットには、

データ内にラベル名の情報は含まれていません。

以下のようにすると、配列に表示するラベルの文字を格納しておき

順場に応じて返すようにします。

.text(function(d,i){

return ["A","B","C","D","E","F","G","H","I"][i];

});

D3.jsではdelay()メソッドを使うことで効果的なアニメーションを表現できます。