ツリーレイアウトを表示する

D3.jsにはツリーレイアウト(樹形図・木構造といったりもします)を生成することができます。ツリーレイアウトは以前の記事で書いたツリーマップと似ています。データセットに必要なプロパティ(キー名)も同一です。今回のサンプルコードでは会社の組織図を表示しています。部門名はnameプロパティで、それに属する課はchildren配列に格納しています。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>ツリーレイアウトを表示する</title>
	<script src="../js/d3.js"></script>
	<style>
		svg{
			width:640px;
			height:480px;
			border:2px solid black;
			background-color:#ffffff;
		}
		.line{
			fill:none;
			stroke:black;
			stroke-width:4px;
		}
		.node{
			fill:white;
			stroke:green;
			stroke-width:2px;
		}
		.label{
			font-size:12px;
			text-anchor:middle;
		}
	</style>
</head>
<body>
	<h1>ツリーマップを表示</h1>
	<svg id="tree"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ツリーレイアウトを表示する</title>

<style>

svg{

width:640px;

height:480px;

border:2px solid black;

background-color:#ffffff;

}

.line{

fill:none;

stroke:black;

stroke-width:4px;

}

.node{

fill:white;

stroke:green;

stroke-width:2px;

}

.label{

font-size:12px;

text-anchor:middle;

}

</style>

</head>

<body>

<h1>ツリーマップを表示</h1>

</body>

</html>

/*
	ツリーマップを表示する
*/
	// HTMLファイルで設定した#treeの要素の幅、高さを取得する
	var svgEle = document.getElementById("tree");
	var svgWidth = getComputedStyle( svgEle, null)
					.getPropertyValue("width");
	var svgHeight = getComputedStyle( svgEle, null)
					.getPropertyValue("height");

	svgWidth = parseFloat( svgWidth );   // 整数に変換する
	svgHeight = parseFloat( svgHeight ); // 整数に変換する

	var offsetLeft   = svgWidth / 2 - 100;
	var offsetTop    = 50;
	var offsetBottom = 40;
	var nodeSize     = 24;

	var arrData ={
	name : "社長",
	children : [
		{ name : "経理部" },
		{ name : "業務部" },
		{ name : "開発部",
		children : [
			{ name : "情報課" },
			{ name : "１課" },
			{ name : "２課",
			children : [
				{ name : "アプリ" },
				{ name : "ツール" }
			]}
		]}
	]};

	/*
		ツリーレイアウトを設定
		ツリーレイアウトを表示する全体のサイズを
		size()メソッドで指定する。
	*/
	var tree = d3.layout.tree()
		/*
			.size()　パラメーター：
			配列で１番目の要素が幅、２番目の要素は高さ
		*/
		.size( [ svgWidth, svgHeight - offsetTop - offsetBottom])

		/*
			表示するノードツリーの全体の幅を指定する場合は
			nodeSize()メソッドで同じく、配列で１番目の要素が幅、
			２番目の要素は高さ、これを使えば横長、縦長に表示できます。
		*/
		.nodeSize([120,110]);

	/*
		レイアウトの設定が終わったら、下記のようにしてノードの設定を行う。
		その後、data()メソッドに下記のようにしてセットします。
	*/
	var nodes = tree.nodes(arrData);

	// ノード間を繋ぐ線を表示
	d3.select("#tree")
		/*
			ノード間の繋がりはpath要素で描画されるので、
			append("path")としてpath要素を追加する。
		*/
		.selectAll("path")
		.data( tree.links(nodes))
		.enter()
		.append("path")
		.attr("class","line")

		/*
			描画するデータは　.attr("d", d3.svg.diagonal() )と書く、
			ノードやリーフ(子を持たないノード)に表示する文字、〇は、
			data(nodes)として、データをセットした後、座標値に設定する。
			座標値はD3.jsが計算します。
		*/
		.attr("d", d3.svg.diagonal() )
		.attr("transform","translate(" + offsetLeft + ", " + offsetTop + ")");

	// ノードに〇を表示
	d3.select("#tree")
		.selectAll("circle")
		.data(nodes)
		.enter()
		.append("circle")
		.attr("class","node")
		.attr("cx",function(d){ return d.x + offsetLeft; })
		.attr("cy",function(d){ return d.y + offsetTop; })
		.attr("r",nodeSize);

	// ノードにテキストを表示
	d3.select("#tree")
		.selectAll("text")
		.data(nodes)
		.enter()
		.append("text")
		.attr("class","label")
		.attr("x",function(d){ return d.x + offsetLeft; })
		.attr("y",function(d){ return d.y + offsetTop; })

		/*
			ノード、リーフに表示する文字は、位置調整が必要なことがあります。
			そのとき、dx,dy属性に値を設定します。
		*/
		.attr("dy",6)
		.text(function(d){ return d.name; });

100

101

102

103

104

105

106

107

108

ツリーマップを表示する

// HTMLファイルで設定した#treeの要素の幅、高さを取得する

var svgEle = document.getElementById("tree");

var svgWidth = getComputedStyle( svgEle, null)

.getPropertyValue("width");

var svgHeight = getComputedStyle( svgEle, null)

.getPropertyValue("height");

svgWidth = parseFloat( svgWidth ); // 整数に変換する

svgHeight = parseFloat( svgHeight ); // 整数に変換する

var offsetLeft = svgWidth / 2 - 100;

var offsetTop = 50;

var offsetBottom = 40;

var nodeSize = 24;

var arrData ={

name : "社長",

children : [

{ name : "経理部" },

{ name : "業務部" },

{ name : "開発部",

children : [

{ name : "情報課" },

{ name : "１課" },

{ name : "２課",

children : [

{ name : "アプリ" },

{ name : "ツール" }

]}

]};

ツリーレイアウトを設定

ツリーレイアウトを表示する全体のサイズを

size()メソッドで指定する。

var tree = d3.layout.tree()

.size()　パラメーター：

配列で１番目の要素が幅、２番目の要素は高さ

.size( [ svgWidth, svgHeight - offsetTop - offsetBottom])

表示するノードツリーの全体の幅を指定する場合は

nodeSize()メソッドで同じく、配列で１番目の要素が幅、

２番目の要素は高さ、これを使えば横長、縦長に表示できます。

.nodeSize([120,110]);

レイアウトの設定が終わったら、下記のようにしてノードの設定を行う。

その後、data()メソッドに下記のようにしてセットします。

var nodes = tree.nodes(arrData);

// ノード間を繋ぐ線を表示

d3.select("#tree")

ノード間の繋がりはpath要素で描画されるので、

append("path")としてpath要素を追加する。

.selectAll("path")

.data( tree.links(nodes))

.enter()

.append("path")

.attr("class","line")

描画するデータは　.attr("d", d3.svg.diagonal() )と書く、

ノードやリーフ(子を持たないノード)に表示する文字、〇は、

data(nodes)として、データをセットした後、座標値に設定する。

座標値はD3.jsが計算します。

.attr("d", d3.svg.diagonal() )

.attr("transform","translate(" + offsetLeft + ", " + offsetTop + ")");

// ノードに〇を表示

d3.select("#tree")

.selectAll("circle")

.data(nodes)

.enter()

.append("circle")

.attr("class","node")

.attr("cx",function(d){ return d.x + offsetLeft; })

.attr("cy",function(d){ return d.y + offsetTop; })

.attr("r",nodeSize);

// ノードにテキストを表示

d3.select("#tree")

.selectAll("text")

.data(nodes)

.enter()

.append("text")

.attr("class","label")

.attr("x",function(d){ return d.x + offsetLeft; })

.attr("y",function(d){ return d.y + offsetTop; })

ノード、リーフに表示する文字は、位置調整が必要なことがあります。

そのとき、dx,dy属性に値を設定します。

.attr("dy",6)

.text(function(d){ return d.name; });