説明
D3.jsでツリー(ノード)を描くにはd3.svg.tree()メソッドを使います。ツリーを描く場合、あらかじめJSON形式のデータを用意しておきます。このJSONデータにはnameとchildrenのキーがあります。nameはツリーのノードとなる部分です。childrenは、さらに子ノードがある場合に指定します。childrenは配列となっており、何重にも入れ子にすることができます。
ツリーを描くにはd3.layout.tree()とします。表示されるサイズはsize()メソッドで指定します。パラメーターには配列で[横幅, 縦幅]の順番で指定します。次にtree.nodes(dataList)としてデータからノードを取り出します。このノードをdata()メソッドに指定します。ツリーのノードだけを描く場合はdata(tree.links(nodes))と指定します。ノードとノードを接続し描画するにはattr("d", d3.svg.diagonal())とします。d3.svg.diagonal()で描画に必要なパスが形成されデータとして返されます。
ノードの線や色はattr()メソッドを使って設定する必要があります。ノードの分岐点などに円を表示する場合はSVGのcircleを使います。
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 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", 5) // 半径を設定
.style("stroke", "red") // 色を設定
.style("fill", "white") // 色を設定