ツリーノードの先に文字を表示する (SVG使用)

説明

ツリーノードの先に文字を表示するには、append()メソッドでtext要素を追加します。text()メソッドで文字を設定する際に2番目のパラメーターに関数を渡します。この関数にはノードのデータがパラメーターとして渡されます。サンプルの場合、JSONデータのnameプロパティを表示するため、関数に渡されたデータ（オブジェクト）のnameプロパティを返しています。
これ以外の説明に関してはこちらのページを参照してください。

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

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 dataList = {
	name:"ルートディレクトリ",
	children:[
		{ name:"ファイル1" },
		{ name:"ファイル2" },
		{ 
			name:"フォルダA",
			children:[
				{ name:"ファイルC" },
				{ name:"ファイルD" },
				{ name:"ファイルE" },
				{ name:"フォルダB",
					children:[
						{ name:"ファイルF" },
					]
				}
			]
		}
	]
};
var svgWidth = 320;	// SVG領域の横幅
var svgHeight = 240;	// SVG領域の縦幅
var offsetY = 10;	// 全体の位置調整用
var svg = d3.select("#myGraph").append("svg")
	.attr("width", svgWidth).attr("height", svgHeight)
var color = d3.scale.category10();  // 10色を指定
// ツリーの線を描く
svg.selectAll("path")	// パスを対象にする
	.data(tree.links(nodes))	// リンク情報を読み込む
	.enter()
	.append("path")	// パスを生成する
	.attr("d", d3.svg.diagonal())//ノード間を絆ぐ
	.attr("fill", "none")
	.attr("stroke", "#aaa")
	.attr("stroke-width", 1)
	.attr("transform", "translate(0, "+offsetY+")")	// 全体にずらす
// ノードの先にテキストを表示（重なって表示される）
svg.selectAll("text")
	.data(nodes)
	.enter()
	.append("text")	// text要素を追加
	.attr("x", function(d){ return d.x })
	.attr("y", function(d){ return d.y+offsetY })
	.attr("text-anchor", "middle")
	.attr("font-size", 9)
	.text(function(d){ return d.name })	// nameプロパティを返す
	.style("fill", "red");