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

2015年10月29日

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; });

-D3.js
-ツリーレイアウト

comment コメントをキャンセル

: D3.js

ヒートマップをDOMに表示する

D3.jsは表示処理は行わないため、SVG、canvasだけではなく、HTMLのdiv要素を使いグラフを表示することができます、ヒートマップもdiv要素を表示することができます。ヒートマップのような単 ...

: D3.js

円グラフに数値とテキストを加えてみる

円グラフの中央にテキストを表示する円グラフの中に文字を表示してみます。円グラフ中央に合計値を表示します。D3.jsでは便利な機能があります。配列内の合計値を取得するには、d3.sum()メソッドを使 ...

D3.js

散布図のデータに応じて目盛りを調整する

散布図に目盛りを表示してみます。サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>散布図のデータを定期的に更新する</title>
	<script src="../js/d3.js"></script>

	<style>
	svg{
		width:340px;
		height:340px;
		border:2px solid red;}
	.mark{ fill:red; stroke:none;}

	.axis text{font-size:12px;}
	.axis path,
	.axis line{
		fill:none;
		stroke:black;
	}

	</style>

</head>
<body>
	<h2>散布図を表示する</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>散布図のデータを定期的に更新する</title>

<style>

svg{

width:340px;

height:340px;

border:2px solid red;}

.mark{ fill:red; stroke:none;}

.axis text{font-size:12px;}

.axis path,

.axis line{

fill:none;

stroke:black;

}

</style>

</head>

<body>

<h2>散布図を表示する</h2>

</body>

</html>

/*
	散布図を表示する
*/

	var svgWidth  = 300; // SVG要素の幅 
	var svgHeight = 300; // SVG要素の高さ
	var offsetX = 30;    // Ｘ座標のずれ
	var offsetY = -20;    // Ｙ座標のずれ

	var arrData = [
		[16,32],[64,48],[128,92],[70,150],[120,300],
		[45,90],[110,160],[300,20],[180,180],[15,145]
	];

	var circleElements = d3.select("#graph")
	.selectAll("circle")                   // circle要素を追加
	.data(arrData);

	circleElements 
	.enter()
	.append("circle")                      // CSSクラスを指定
	.attr("class","mark")
	.attr("cx",function(d,i){
		return d[0] + offsetX;             // １番目の要素をＸ表に指定
	})
	.attr("cy",function(d,i){
		return svgHeight - d[1] - offsetY; // ２番目の要素をＹ座標に指定
	})
	.attr("r",4);                          // 点の半径

// アニメーション後の散布図に使用するデータを再設定
function generateData(data){

	var result = data
		.map(function(d,i){
			// 配列の要素数だけ繰り返す
			var x = Math.random() * svgWidth;  // Ｘ座標を設定
			var y = Math.random() * svgHeight; // Ｙ座標を設定
			return [x, y];
		});
	return result;
}

// 散布図を更新する関数
function generateGraph(){

	circleElements
	.data(arrData)
	.transition()
	.attr("cx",function(d,i){
		return d[0] + offsetX;
	})
	.attr("cy",function(d,i){
		return svgHeight - d[1] - offsetY;
	});
}

function drawScale(){

	var maxX = d3.max(arrData,function(d,i){
	/*
		以下のようにd[ ]の添字を０を指定すると
		Ｘ座標の最大値を求めることができます。
	*/
		return d[0]; // Ｘ座標
	});
	var maxY = d3.max(arrData,function(d,i){
	/*
		以下のようにd[ ]の添字を１を指定すると
		Ｙ座標の最大値を求めることができます。
	*/
		return d[1]; // Ｙ座標
	});
	
	// 縦の目盛りを表示するために縮尺設定
	var yScale = 

	/*
		上記で求めた最大値maxYをここで使用する。
	*/
		d3.scale.linear()  // 縮尺設定
		.domain([0, maxY]) // 元データの範囲
		.range([maxY, 0]); // 実際の出力サイズ

	// 目盛りを表示
	d3.select("#graph")
		.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + offsetX + ", " + 
		( svgHeight - maxY - offsetY ) + ")" )
		.call(
			d3.svg.axis()
			.scale(yScale)
			.orient("left")
		);

	// 横の目盛りを表示するために縮尺設定
	var xScale =
	/*
		上記で求めた最大値maxXをここで使用する。
	*/
		 d3.scale.linear() // 縮尺設定
		.domain([0, maxX]) // 元データの範囲
		.range([0, maxX]); // 実際の出力サイズ

	// 目盛りを表示
	d3.select("#graph")
		.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + offsetX + ", " + 
		( svgHeight - offsetY ) + ")" )
		.call(
			d3.svg.axis()
			.scale(xScale)
			.orient("bottom")
		);

}
	drawScale();
	// 一定時間後に行う処理
	setInterval(function(){
		arrData = generateData( arrData ); // データを更新
		generateGraph();                   // グラフの更新(アニメーション)
	},2000);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

散布図を表示する

var svgWidth = 300; // SVG要素の幅

var svgHeight = 300; // SVG要素の高さ

var offsetX = 30; // Ｘ座標のずれ

var offsetY = -20; // Ｙ座標のずれ

var arrData = [

[16,32],[64,48],[128,92],[70,150],[120,300],

[45,90],[110,160],[300,20],[180,180],[15,145]

];

var circleElements = d3.select("#graph")

.selectAll("circle") // circle要素を追加

.data(arrData);

circleElements

.enter()

.append("circle") // CSSクラスを指定

.attr("class","mark")

.attr("cx",function(d,i){

return d[0] + offsetX; // １番目の要素をＸ表に指定

})

.attr("cy",function(d,i){

return svgHeight - d[1] - offsetY; // ２番目の要素をＹ座標に指定

})

.attr("r",4); // 点の半径

// アニメーション後の散布図に使用するデータを再設定

function generateData(data){

var result = data

.map(function(d,i){

// 配列の要素数だけ繰り返す

var x = Math.random() * svgWidth; // Ｘ座標を設定

var y = Math.random() * svgHeight; // Ｙ座標を設定

return [x, y];

});

return result;

}

// 散布図を更新する関数

function generateGraph(){

circleElements

.data(arrData)

.transition()

.attr("cx",function(d,i){

return d[0] + offsetX;

})

.attr("cy",function(d,i){

return svgHeight - d[1] - offsetY;

});

}

function drawScale(){

var maxX = d3.max(arrData,function(d,i){

以下のようにd[ ]の添字を０を指定すると

Ｘ座標の最大値を求めることができます。

return d[0]; // Ｘ座標

});

var maxY = d3.max(arrData,function(d,i){

以下のようにd[ ]の添字を１を指定すると

Ｙ座標の最大値を求めることができます。

return d[1]; // Ｙ座標

});

// 縦の目盛りを表示するために縮尺設定

var yScale =

上記で求めた最大値maxYをここで使用する。

d3.scale.linear() // 縮尺設定

.domain([0, maxY]) // 元データの範囲

.range([maxY, 0]); // 実際の出力サイズ

// 目盛りを表示

d3.select("#graph")

.append("g")

.attr("class","axis")

.attr("transform","translate(" + offsetX + ", " +

( svgHeight - maxY - offsetY ) + ")" )

.call(

d3.svg.axis()

.scale(yScale)

.orient("left")

);

// 横の目盛りを表示するために縮尺設定

var xScale =

上記で求めた最大値maxXをここで使用する。

d3.scale.linear() // 縮尺設定

.domain([0, maxX]) // 元データの範囲

.range([0, maxX]); // 実際の出力サイズ

// 目盛りを表示

d3.select("#graph")

.append("g")

.attr("class","axis")

.attr("transform","translate(" + offsetX + ", " +

( svgHeight - offsetY ) + ")" )

.call(

d3.svg.axis()

.scale(xScale)

.orient("bottom")

);

}

drawScale();

// 一定時間後に行う処理

setInterval(function(){

arrData = generateData( arrData ); // データを更新

generateGraph(); // グラフの更新(アニメーション)

},2000);

...

: D3.js

CSVファイルからデータを読み込んで、アニメーションも付けて散布図を表示してみる

タイトルの通りです。CSVファイルを読み込んで、散布図を表示します。今回の記事の後半部分では、読み込んだ数値に合わせてグラフの縦軸、横軸の幅も対応させた散布図を作成します。サンプルコードの実行結果は ...

: D3.js

ヒストグラムを作成する

ヒストグラムはデータの分布状況を調べるのに便利です。D3.jsではヒストグラムを表示するためのレイアウト機能が備え付けられています。ヒストグラム作成の基本 HTMLファイルには、予めヒストグラムで表 ...

積み上げ棒グラフ

鶏頭図(けいとうず)を表示する