多機能アニメーション付棒グラフを作ってみる

2015年10月13日

たいそうな記事のタイトルですが、過去７記事で書いたことを
まとめた棒グラフを作成します。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>棒グラフを表示する表に色々機能をつけてみる</title>

	<style>
	#sampleGraph{width:100%;}
	.axis text{font-size:16px;}

	.axis path,.axis line{
		fill:none;
		stroke:black;}
	</style>

	<script src="../js/d3.js"></script>
</head>
<body>
	<h1>表を作成する</h1>
	<button id="upDateGraph" style="margin-bottom:16px;">グラフ更新</button>
	<svg id="sampleGraph">
	</svg>

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

<!DOCTYPE html>

<head>

<title>棒グラフを表示する表に色々機能をつけてみる</title>

<style>

#sampleGraph{width:100%;}

.axis text{font-size:16px;}

.axis path,.axis line{

fill:none;

stroke:black;}

</style>

</head>

<body>

<h1>表を作成する</h1>

<button id="upDateGraph" style="margin-bottom:16px;">グラフ更新</button>

</svg>

</body>

</html>

	var arrData = [];

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

		for(var i=0 ; i < data.length ;i++ ){
			arrData.push(data[i].graph1);
		}

		d3.select("#sampleGraph") //SVG要素を指定
		.selectAll("rect")        //SVGで四角形を示す要素を指定
		.data(arrData)            //データを設定
		.enter()                  //データの数に応じrect要素を生成
		.append("rect")           //SVGで四角形を生成
		.attr("x",10)             //棒グラフの表示位置を10px右にずらす
		.attr("y", function(d,i){
			return i * 25;        //棒グラフの表示位置を25pxずつずらす
		})
		.on("click",function(){
			d3.select(this)
			.style("fill","#99ccee");
		})
		.attr("height","20px") //棒グラフ(1本あたり)の高さ
		.attr("width" , "0px") //棒グラフの幅
		.transition()
		.delay(function(d,i){
			return i * 300;
		})
		.duration(1600)
		.attr("width",function(d,i){
			return d + "px";
		});

		var xScale = 
			d3.scale.linear() //リニアスケールを設定
			.domain([0,300])  //元データ範囲
			.range([0,300]);  //実際の出力サイズ

		//目盛りを設定して表示
		d3.select("#sampleGraph")
		.append("g")
		.attr("class", "axis")
		.attr("transform","translate(10," + (( 1 + arrData.length ) * 20 + 5 ) + ")")
		.call( d3.svg.axis()     //callで目盛りを表示する関数を呼びだす
				.scale(xScale)   //スケールを適用
				.orient("bottom")//目盛りの表示位置を下側
		)

		d3.select("#upDateGraph")
		.on("click",
		function(){
			for( var i=0; i< arrData.length ; i++){
				arrData[i] = Math.floor( Math.random() * 300 );
			}
			d3.select("#sampleGraph")
			.selectAll("rect")
			.data(arrData)
			.transition()
			.attr("width",
			function(d,i){
				return d + "px";
			});
		});
	});

var arrData = [];

d3.csv("test.csv",

function(error,data){

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

arrData.push(data[i].graph1);

}

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

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

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

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

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

.attr("x",10) //棒グラフの表示位置を10px右にずらす

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

return i * 25; //棒グラフの表示位置を25pxずつずらす

})

.on("click",function(){

d3.select(this)

.style("fill","#99ccee");

})

.attr("height","20px") //棒グラフ(1本あたり)の高さ

.attr("width" , "0px") //棒グラフの幅

.transition()

.delay(function(d,i){

return i * 300;

})

.duration(1600)

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

return d + "px";

});

var xScale =

d3.scale.linear() //リニアスケールを設定

.domain([0,300]) //元データ範囲

.range([0,300]); //実際の出力サイズ

//目盛りを設定して表示

d3.select("#sampleGraph")

.append("g")

.attr("class", "axis")

.attr("transform","translate(10," + (( 1 + arrData.length ) * 20 + 5 ) + ")")

.call( d3.svg.axis() //callで目盛りを表示する関数を呼びだす

.scale(xScale) //スケールを適用

.orient("bottom")//目盛りの表示位置を下側

)

d3.select("#upDateGraph")

.on("click",

function(){

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

arrData[i] = Math.floor( Math.random() * 300 );

}

d3.select("#sampleGraph")

.selectAll("rect")

.data(arrData)

.transition()

.attr("width",

function(d,i){

return d + "px";

});

graph1,graph2,graph3
40,100,240
230,80,260
120,260,40
10,120,180
160,30,100

graph1,graph2,graph3

40,100,240

230,80,260

120,260,40

10,120,180

160,30,100