ツリーノードの先に文字を表示する (SVG使用)

説明

ツリーノードの先に文字を表示するには、append()メソッドでtext要素を追加します。text()メソッドで文字を設定する際に2番目のパラメーターに関数を渡します。この関数にはノードのデータがパラメーターとして渡されます。サンプルの場合、JSONデータのnameプロパティを表示するため、関数に渡されたデータ（オブジェクト）のnameプロパティを返しています。
これ以外の説明に関してはこちらのページを参照してください。

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

HTMLソース

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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コード

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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色を指定
// ツリーの線を描く
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("text")
    .data(nodes)
    .enter()
    .append("text") // text要素を追加
    .attr("x", function(d){ return d.x })
    .attr("y", function(d){ return d.y+offsetY })
    .attr("text-anchor", "middle")
    .attr("font-size", 9)
    .text(function(d){ return d.name }) // nameプロパティを返す
    .style("fill", "red");