ノードをドラッグできるようにする (SVG使用)

説明

D3.jsのフォースレイアウト（力学モデル）でノードをドラッグできるようにするには、ノードの円を描画した時にcall(force.drag)を実行します。フォースレイアウトの説明についてはこちらのページを参照してください。

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

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<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 list = {
	nodes : [	// ノードリスト
		{ name : "mz-700" },
		{ name : "PC-6001" },
		{ name : "FM-7" }
	],
	links : [	// ノードとノードを結ぶ線の関係。配列要素の順番をID・参照番号として利用している
		{ source : 0, target : 1 },
		{ source : 0, target : 2 },
		{ source : 1, target : 2 }
	]
};
var svgWidth = 320;	// SVG領域の横幅
var svgHeight = 240;	// SVG領域の縦幅
var svg = d3.select("#myGraph").append("svg")
	.attr("width", svgWidth).attr("height", svgHeight)
// Force Layoutを設定
var force = d3.layout.force()
	.nodes(list.nodes)	// ノードを指定
	.links(list.links)	// ノードとノードを結ぶリンク線を指定
	.size([svgWidth, svgHeight])
	.linkDistance(160)
	.start();
// ノードとノードを結ぶ線を描画
var link = svg.selectAll("line")
	.data(list.links)
	.enter()
	.append("line")
	.style("stroke", "red")
	.style("stroke-width", 5);
// ノードを示す円（●）を描画
var node = svg.selectAll("circle")	// 円を生成
	.data(list.nodes)
	.enter()
	.append("circle")	// circleを追加
	.attr("r", 10)	// 半径は10
	.call(force.drag);	// ノードをドラッグできるようにする
// 再描画時に線を描画
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; });
});