フォースレイアウト

D3.jsでは、フォースレイアウトを作成する機能も用意されています。フォースレイアウトは予めノードとノードを結びつけるリンク情報が必要です。今回用意したサンプルコードではデータセットのnodesにノード情報を、linksにリンク情報が格納されています。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>フォースレイアウトを表示してみる</title>
	<script src="../js/d3.js"></script>
	<style>
		svg{
			width:320px;
			height:320px;
			border:1px solid black;
			background-color:#ffffff;
		}
		.forceLine{
			stroke:green;
			stroke-width:4;
		}
	</style>
</head>
<body>
	<h1>フォースレイアウトを表示</h1>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>フォースレイアウトを表示してみる</title>

<style>

svg{

width:320px;

height:320px;

border:1px solid black;

background-color:#ffffff;

}

.forceLine{

stroke:green;

stroke-width:4;

}

</style>

</head>

<body>

<h1>フォースレイアウトを表示</h1>

</body>

</html>

/*
	フォースレイアウトを表示
*/
	// HTMLファイルで設定した#graphの幅、高さを取得する
	var svgEle = document.getElementById("graph");
	var svgWidth = getComputedStyle( svgEle, null)
					.getPropertyValue("width");
	var svgHeight = getComputedStyle( svgEle, null)
					.getPropertyValue("height");

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

	var arrData = {
		nodes : [
			{ name : "chair" },
			{ name : "desk" },
			{ name : "pen" },
			{ name : "eraser" }
		],
		links : [
			/*
				source 接続元ノード番号
				target 接続先ノード番号

				これら番号はnodes配列で
				宣言したノードの出現番号です。(最初のノードは0番)
			*/
			{ source : 0, target : 1 },
			{ source : 1, target : 2 },
			{ source : 2, target : 3 },
			{ source : 3, target : 0 }
		]
	};

	// フォースレイアウトの設定
	var force = d3.layout.force()
		.nodes(arrData.nodes)		  // ノード指定
		.links(arrData.links)		  // ノードとノードを結ぶリンク線指定
		.size([ svgWidth, svgHeight]) // 表示領域のサイズ
		.linkDistance(90)			  // 距離指定
		.linkStrength(5)			  // 強さ指定
		.gravity(0.0001)			  // 重力指定
		.start()

	var link = d3.select("#graph")
		.selectAll("line")			// 線生成
		.data(arrData.links)		// links配列をデータセットとする
		.enter()
		.append("line")				// 線を追加
		.attr("class","forceLine"); // CSSクラスを指定

	// ノードを表す●を表示
	var node = d3.select("#graph")
		.selectAll("circle")
		.data(arrData.nodes)
		.enter()
		.append("circle")
		.attr("r",10)
		.call(force.drag);			// ノードをドラッグ可能にする
/*
	フォースレイアウトは自動的にアニメーション処理が実行されますが、
	その時にノードとノードを結ぶ線の再描画を行う必要があり、そのときに、
	フォースレイアウトでtickイベントが発せします。on()メソッドを使い
	tickイベントを捕えて、イベント発生時に処理を行う処理を書きます。

	この関数内で座標値の再設定を行う処理を書く。座標値の計算はD3.jsで
	やるので、表示するノードと線の座標値を設定するだけです。
*/
force.on("tick",function(){
	link
		// ソースとターゲットの要素座標を指定
		.attr("x1", function(d){ return d.source.x; }) 
		.attr("y1", function(d){ return d.source.y; }) 
		.attr("x2", function(d){ return d.target.x; }) 
		.attr("y2", function(d){ return d.target.y; }) 
	node
		// ノードの座標を指定
		.attr("cx", function(d){ return d.x; }) 
		.attr("cy", function(d){ return d.y; }) 
})

フォースレイアウトを表示

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

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

var svgWidth = getComputedStyle( svgEle, null)

.getPropertyValue("width");

var svgHeight = getComputedStyle( svgEle, null)

.getPropertyValue("height");

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

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

var arrData = {

nodes : [

{ name : "chair" },

{ name : "desk" },

{ name : "pen" },

{ name : "eraser" }

links : [

source 接続元ノード番号

target 接続先ノード番号

これら番号はnodes配列で

宣言したノードの出現番号です。(最初のノードは0番)

{ source : 0, target : 1 },

{ source : 1, target : 2 },

{ source : 2, target : 3 },

{ source : 3, target : 0 }

]

};

// フォースレイアウトの設定

var force = d3.layout.force()

.nodes(arrData.nodes) // ノード指定

.links(arrData.links) // ノードとノードを結ぶリンク線指定

.size([ svgWidth, svgHeight]) // 表示領域のサイズ

.linkDistance(90) // 距離指定

.linkStrength(5) // 強さ指定

.gravity(0.0001) // 重力指定

.start()

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

.selectAll("line") // 線生成

.data(arrData.links) // links配列をデータセットとする

.enter()

.append("line") // 線を追加

.attr("class","forceLine"); // CSSクラスを指定

// ノードを表す●を表示

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

.selectAll("circle")

.data(arrData.nodes)

.enter()

.append("circle")

.attr("r",10)

.call(force.drag); // ノードをドラッグ可能にする

フォースレイアウトは自動的にアニメーション処理が実行されますが、

その時にノードとノードを結ぶ線の再描画を行う必要があり、そのときに、

フォースレイアウトでtickイベントが発せします。on()メソッドを使い

tickイベントを捕えて、イベント発生時に処理を行う処理を書きます。

この関数内で座標値の再設定を行う処理を書く。座標値の計算はD3.jsで

やるので、表示するノードと線の座標値を設定するだけです。

force.on("tick",function(){

link

// ソースとターゲットの要素座標を指定

.attr("x1", function(d){ return d.source.x; })

.attr("y1", function(d){ return d.source.y; })

.attr("x2", function(d){ return d.target.x; })

.attr("y2", function(d){ return d.target.y; })

node

// ノードの座標を指定

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

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

})