散布図のシンボルの横に値を表示する (SVG使用)

説明

D3.jsで散布図のシンボルに値を描くにはデータの値をX,Y座標にマッピングします。次にSVGのtext要素を生成します。生成したtext要素に値を表示するにはtext()メソッドのパラメーターに関数を指定します。この関数にはデータごとに値が渡されます。次にtext要素のX,Y座標を調整し、フォントやサイズ、色を指定します。これで、プロットしたシンボルの横に値が表示されます。

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

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<style>
	svg { border: 1px solid black; }
</style>
<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 = [[120,210], [230, 40], [200, 130], [15, 225], [182, 75], [50, 20], [160, 140], [160, 90], [10, 30]];
var svgWidth = 320;	// SVG領域の横幅
var svgHeight = 240;	// SVG領域の縦幅
// SVGの表示領域を生成
var svg = d3.select("#myGraph").append("svg")
	.attr("width", svgWidth).attr("height", svgHeight)
// 散布図を描画
svg.selectAll("path")
	.data(list)
	.enter()
	.append("path")	// パスを生成
	.attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; })	// 位置を調整
	.attr("d", d3.svg.symbol().size(20));	// シンボルを指定する
// データ内容を表示する
svg.selectAll("text")
	.data(list)
	.enter()
	.append("text")
	.text(function(d){	// 文字を生成
		return d[0]+","+d[1];
	})
	.attr("transform", function(d) { return "translate(" + (d[0]+2) + "," + (d[1]-4) + ")"; })	// 位置を調整
	.attr("font-family", "tahoma")	// フォントを指定
	.attr("font-size", "9px")	// 文字サイズを指定
	.attr("fill", "red")	// 文字の色を指定