説明
ツリーノードの階層の深さに応じて色を設定するには、style()メソッドで色を設定する際に2番目のパラメーターに関数を渡します。この関数にはノードのデータがパラメーターとして渡されます。どのくらいの深さの階層なのかは渡されたデータ（オブジェクト）のdepthプロパティに入っています。一番上のルートが0になり、以後階層が増えるごとに1ずつ増加していきます。
ノードの色はd3.scale.category10()メソッドを利用して設定します。階層レベルを、そのままパラメーターとして渡せば色を設定することができます。
これ以外の説明に関しては
こちらのページを参照してください。
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 color = d3.scale.category10(); // 10色を指定
// ツリーレイアウト
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", function(d){
return color(d.depth); // 階層の深さに応じて色を設定
})