横棒グラフの棒の中にデータの値を表示する (SVG使用)

説明

D3.jsでSVGを使って横棒グラフの棒の中にデータの値を表示するにはtext要素を生成し、そこに配列データ内容を出力します。表示する文字はtext()メソッドを使います。text()メソッドのパラメータに関数を指定し、function(d){ return d; }とします。これでSVGのtext要素に配列データが出力されます。
表示する文字の位置はattr()メソッドを使いx属性とy属性に指定します。文字サイズはfont-size属性に文字サイズを単位付きで指定します。

サンプル [サンプルを実行する]　[サンプルをダウンロード]

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myGraph"></div>
<script src="js/sample.js"></script>
</body>
</html>

JavaScriptコード

var list = [10, 30, 5, 60, 40, 78, 56, 30, 24, 80];
var svgWidth = 640;	// SVG領域の横幅
var svgHeight = 480;	// SVG領域の縦幅
// SVG全体の設定
var svg = d3.select("#myGraph").append("svg")
	.attr("width", svgWidth).attr("height", svgHeight)
// 横棒グラフを描く部分
svg.selectAll("rect")	// SVGでの四角形を示す要素を指定
	.data(list)	// データを設定
	.enter()
	.append("rect")	// SVGでの四角形を示す要素を生成
	.attr("x", 0)	// 横棒グラフなのでX座標は0。これはSVG上での座標
	.attr("y", function(d,i){	// Y座標を配列の順序に応じて計算
		return i * 18;
	})
	.attr("width", function(d){	// 横幅を配列の内容に応じて計算
		return (d*2) +"px";
	})
	.attr("height", "16")	// 棒グラフの高さを指定
	.attr("style", "fill:rgb(255,160,160)")	// 棒グラフの色を薄赤色に設定
// 横棒グラフに値を表示する部分
svg.selectAll("text")
	.data(list)	// データを設定
	.enter()
	.append("text")	// SVGでの文字を示す要素を生成
	.text(function(d){	// 配列内のデータを表示する
		return d;
	})
	.attr("x", 2)	// 文字のX座標を指定
	.attr("y", function(d,i){	// 文字のY座標を指定
		return i * 18 + 14;
	})
	.attr("font-size", "10pt")	// 文字のサイズを指定