D3.jsで縦棒グラフを表示してみる

グラフの中でも使用頻度が高いのが縦棒グラフです。これまでの記事では横棒グラフを表示しましたが、原理は縦棒グラフも同じです。異なる点は、グラフの棒が横に伸びるか、縦に伸びるかの違いです。

グラフ内に数値を表示する

グラフ内に数値を表示します。数値のスタイルをHTMLファイル内で設定しておきます。必要なのは文字サイズと、文字をどこから表示するかです。文字の描画位置は下記の表に書いてある通り３種類のいずれかを設定できます。

値	詳細
start	左から描画(初期値)
middle	中央から描画
end	右側から描画

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

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

	<style>
	svg{
		width:320px;
		height:240px;
		border:2px solid black;
	}
	rect{fill:green;}
	.fillPink{fill:pink;}
	.barNum{
		font-size:10px;
		text-anchor:middle;
	}
	/*
		test.js上の.attr("class","barNum")の箇所の
		「barNum」を「barNumTate」へ変更すると、棒グラフの中の数値を
		縦書きへ変更することができます。
	*/
	.barNumTate{
		font-size:10px;
		text-anchor:end;

		/* 
			writing-modeの設定値
			1r 又は 1r-tb：左から右
			rl 又は rl-tb：右から左
			tb 又は tb-rl：上から下
		*/
		writing-mode:tb;

		/* 回転角度を示します。 0,90,180,270を設定できます。 */
		glyph-orientation-vertical:0;
	}
	</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:240px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

.barNum{

font-size:10px;

text-anchor:middle;

}

test.js上の.attr("class","barNum")の箇所の

「barNum」を「barNumTate」へ変更すると、棒グラフの中の数値を

縦書きへ変更することができます。

.barNumTate{

font-size:10px;

text-anchor:end;

writing-modeの設定値

1r 又は 1r-tb：左から右

rl 又は rl-tb：右から左

tb 又は tb-rl：上から下

writing-mode:tb;

/* 回転角度を示します。 0,90,180,270を設定できます。 */

glyph-orientation-vertical:0;

}

</style>

</head>

<body>

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

</body>

</html>

	var svgHeight = 240; //svg要素の高さ
	var bar;            //棒グラフの棒の要素を格納
	var arrData = [120,80,150,200,110];

	bar = d3.select("#graph")
		.selectAll("rect")
		.data(arrData);

	bar.enter()
	.append("rect")
	.attr("class", "fillPink")
	.attr("height", function(d,i){
		return d;
	})
	.attr("width",20)
	.attr("x",function(d,i){
		return i * 25;
	})

/*
	注意する必要があるのは、Ｙ座標です。SVGの座標は一般的なコンピュータ系の
	座標と同じで、左上が原点です。右下に行くほど座標値が大きくなります。
	グラフのＹ座標をデータと同一にすると、棒グラフは上から下に
	伸びて表示されます。そこでＳＶＧの高さからデータの値を引くことで
	下から上に伸びるように調整(svgHeight - d の部分)しています。
*/
	.attr("y",function(d,i){  //Y座標を指定
		return svgHeight - d; //Y座標を計算
	});

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

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

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

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

var arrData = [120,80,150,200,110];

bar = d3.select("#graph")

.selectAll("rect")

.data(arrData);

bar.enter()

.append("rect")

.attr("class", "fillPink")

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

return d;

})

.attr("width",20)

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

return i * 25;

})

注意する必要があるのは、Ｙ座標です。SVGの座標は一般的なコンピュータ系の

座標と同じで、左上が原点です。右下に行くほど座標値が大きくなります。

グラフのＹ座標をデータと同一にすると、棒グラフは上から下に

伸びて表示されます。そこでＳＶＧの高さからデータの値を引くことで

下から上に伸びるように調整(svgHeight - d の部分)しています。

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

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

});

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

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

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

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

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

return i * 25 + 10; //棒グラフの表示間隔に合わせる

})

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

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

return d;

});