説明
D3.jsでSVGを使って縦棒グラフの棒の中にデータの値を表示するにはtext要素を生成し、そこに配列データ内容を出力します。表示する文字はtext()メソッドを使います。text()メソッドのパラメータに関数を指定し、function(d){ return d; }とします。これでSVGのtext要素に配列データが出力されます。
表示する文字の位置はattr()メソッドを使いx属性とy属性に指定します。文字サイズはfont-size属性に文字サイズを単位付きで指定します。また、文字の描画位置を中央からにする場合はtext-anchor属性にmiddleの文字を指定します。
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領域の縦幅
var barHeight = 200; // 棒グラフの基準位置
// 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", function(d,i){ // X座標を配列の順序に応じて計算
return i * 18;
})
.attr("y", function(d){ // 縦幅を配列の内容に応じて計算
return barHeight-(d*2) +"px";
})
.attr("height", function(d){ // 縦幅を配列の内容に応じて計算
return (d*2) +"px";
})
.attr("width", 16)
.attr("style", "fill:rgb(255,160,160)") // 棒グラフの色を薄赤色に設定
// 縦棒グラフに値を表示する部分
svg.selectAll("text")
.data(list) // データを設定
.enter()
.append("text") // SVGでの文字を示す要素を生成
.text(function(d){ // 配列内のデータを表示する
return d;
})
.attr("x", function(d,i){ // 文字のX座標を指定
return i * 18+8; // 8は棒グラフの横幅の半分の数値
})
.attr("y", barHeight) // 文字のY座標を指定
.attr("font-size", "10pt") // 文字のサイズを指定
.attr("text-anchor", "middle") // 文字の描画基準位置を中央にする