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", 10) // 半径を設定 .style("stroke", "red") // 色を設定 .style("fill", "white") // 塗りを白色にする// 階層を示す値を表示するsvg.selectAll("text") .data(nodes) .enter() .append("text") // 文字の要素を追加 .attr("x", function(d){ return d.x }) .attr("y", function(d){ return d.y+14 }) .attr("text-anchor", "middle") // 座標の中央から描画 .attr("font-size", 14) // 14ptにする .attr("font-weight", "bold") // 太字にして読みやすくする .text(function(d){ return d.name; // 深さを表示する }) .style("fill", "black"); // 塗りを黒色にする
0 コメント