積み上げ棒グラフ

D3.jsでは積み上げ棒グラフもあります。積み上げ棒グラフはグループ化のg要素を使い、その中に、rect要素を生成します。コメントはサンプルコードの中に書きました。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>積み上げ棒グラフを表示してみる</title>
	<script src="../js/d3.js"></script>
	<style>
		svg{
			width:320px;
			height:240px;
			border:1px solid black;
			background-color:#ffffff;
		}
	</style>
</head>
<body>
	<h1>積み上げ棒グラフを表示</h1>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>積み上げ棒グラフを表示してみる</title>

<style>

svg{

width:320px;

height:240px;

border:1px solid black;

background-color:#ffffff;

}

</style>

</head>

<body>

<h1>積み上げ棒グラフを表示</h1>

</body>

</html>

/*
	積み上げ棒グラフを表示する
*/
	var arrData =[
		[
			{ year : 2012 , s :  8 },
			{ year : 2013 , s : 16 },
			{ year : 2014 , s : 32 },
			{ year : 2015 , s : 24 }
		],
		[
			{ year : 2012 , s : 30 },
			{ year : 2013 , s : 11 },
			{ year : 2014 , s : 19 },
			{ year : 2015 , s : 27 }
		],
		[
			{ year : 2012 , s : 10 },
			{ year : 2013 , s : 40 },
			{ year : 2014 , s : 20 },
			{ year : 2015 , s : 10 }
		]
	];

	var svgHeight = 240; // svg要素の高さ
	var barWidth  =  50; // 棒グラフの横幅
	var step = 80;		 // 棒グラフの横の間隔
	var offsetX = 10;	 // Ｘ座標のずれ

	var color = ["green","yellow","orange"];


	/*
		積み上げ棒グラフはd3.layout.stack()を利用します。
		棒グラフのデータがyプロパティ(または、キー名がy)でないとき、
		サンプルコードのようにy()メソッドを使いyに対応する
		プロパティ名(キー名)の値を返す。
	*/
	var stack = d3.layout.stack()
		.y(function(d){ return d.s; }); // キー名sのデータを使用

	d3.select("#graph")

	/*
		g要素を生成して、データセットを設定する。
		グラフの色はこのg要素に指定します。
		もしrect要素に指定すると１つの棒の色が
		全て同じ色になります。
	*/
		.selectAll("g")				// グループ精製
		.data( stack(arrData) )		// データセットを設定
		.enter()
		.append("g")				// g要素追加
		.attr("fill",function(d,i){ // 棒グラフの色を設定
			return color[i];
		})
		.selectAll("rect")
		.data(function(d,i){
			return d;
		})
		.enter()
		.append("rect")
		.attr("x",function(d,i){
			return offsetX + i * step;
		})
		.attr("y",function(d,i){
	/*
		複数のデータが積み上がるとき、D3.jsでstack
		レイアウト計算が行われます。そのとき積み上げた
		四角形のＹ座標は　y0プロパティとyプロパティに格納されます。
		下記のように書くと、新たに表示するべき積み上げ棒グラフの
		四角形のＹ座標を求めることができる。
	*/
			return svgHeight - d.y0 - d.y
		})
		.attr("width",barWidth)
		.attr("height",function(d,i){
			return d.y;              // 棒グラフの高さ
		});

積み上げ棒グラフを表示する

var arrData =[

[

{ year : 2012 , s : 8 },

{ year : 2013 , s : 16 },

{ year : 2014 , s : 32 },

{ year : 2015 , s : 24 }

[

{ year : 2012 , s : 30 },

{ year : 2013 , s : 11 },

{ year : 2014 , s : 19 },

{ year : 2015 , s : 27 }

[

{ year : 2012 , s : 10 },

{ year : 2013 , s : 40 },

{ year : 2014 , s : 20 },

{ year : 2015 , s : 10 }

]

];

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

var barWidth = 50; // 棒グラフの横幅

var step = 80; // 棒グラフの横の間隔

var offsetX = 10; // Ｘ座標のずれ

var color = ["green","yellow","orange"];

積み上げ棒グラフはd3.layout.stack()を利用します。

棒グラフのデータがyプロパティ(または、キー名がy)でないとき、

サンプルコードのようにy()メソッドを使いyに対応する

プロパティ名(キー名)の値を返す。

var stack = d3.layout.stack()

.y(function(d){ return d.s; }); // キー名sのデータを使用

d3.select("#graph")

g要素を生成して、データセットを設定する。

グラフの色はこのg要素に指定します。

もしrect要素に指定すると１つの棒の色が

全て同じ色になります。

.selectAll("g") // グループ精製

.data( stack(arrData) ) // データセットを設定

.enter()

.append("g") // g要素追加

.attr("fill",function(d,i){ // 棒グラフの色を設定

return color[i];

})

.selectAll("rect")

.data(function(d,i){

return d;

})

.enter()

.append("rect")

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

return offsetX + i * step;

})

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

複数のデータが積み上がるとき、D3.jsでstack

レイアウト計算が行われます。そのとき積み上げた

四角形のＹ座標は　y0プロパティとyプロパティに格納されます。

下記のように書くと、新たに表示するべき積み上げ棒グラフの

四角形のＹ座標を求めることができる。

return svgHeight - d.y0 - d.y

})

.attr("width",barWidth)

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

return d.y; // 棒グラフの高さ

});