ツリーノードの階層の深さを表示する (SVG使用)

説明

ツリーノードの階層の深さを表示するには、append()メソッドでtext要素を追加します。text()メソッドで文字を設定する際に2番目のパラメーターに関数を渡します。この関数にはノードのデータがパラメーターとして渡されます。どのくらいの深さの階層なのかは渡されたデータ（オブジェクト）のdepthプロパティに入っています。一番上のルートが0になり、以後階層が増えるごとに1ずつ増加していきます。この深さを示すdepthプロパティをreturnで返せば深さを示す文字が表示されます。
これ以外の説明に関してはこちらのページを参照してください。

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

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色を指定
// ツリーレイアウト
var tree = d3.layout.tree()
	.size([320, 220])	// ツリーノードの描画範囲を指定
var nodes = tree.nodes(dataList);	// ノードを抽出
// ツリーの線を描く
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("circle")	// 円を選択
	.data(nodes)
	.enter()
	.append("circle")	// 円を追加
	.attr("cx", function(d){ return d.x })	// 中心のX座標を設定
	.attr("cy", function(d){ return d.y+offsetY })	// 中心のY座標を設定
	.attr("r", 10)	// 半径を設定
	.style("stroke", "red")	// 色を設定
	.style("fill", "white")	// 塗りを白色にする
// 階層を示す値を表示する
svg.selectAll("text")
	.data(nodes)
	.enter()
	.append("text")	// 文字の要素を追加
	.attr("x", function(d){ return d.x })
	.attr("y", function(d){ return d.y+14 })
	.attr("text-anchor", "middle")	// 座標の中央から描画
	.attr("font-size", 14)	// 14ptにする
	.attr("font-weight", "bold")	// 太字にして読みやすくする
	.text(function(d){
		return d.depth;	// 深さを表示する
	})
	.style("fill", "black");	// 塗りを黒色にする