【D3.js】【SVG】縦方向の階層ツリーを横方向にしたい

前提

下記サイトを元に、階層ツリーを作成しています。

http://www.openspc2.org/reibun/D3.js/code/graph/tree/1001/index.html

実現したいこと

現在、上から下に展開するレイアウトになっているのですが
右から左に展開するレイアウトに変更したいです。（親要素が右側）

該当のソースコード

html
1
2<!DOCTYPE html>
3<html>
4<head>
5<meta charset="utf-8">
6<title>D3.js サンプル</title>
7<link rel="stylesheet" href="css/main.css">
8<style>
9    svg { border: 1px solid black; }
10</style>
11<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
12</head>
13<body>
14<h1>D3.jsサンプル</h1>
15<div id="myGraph"></div>
16<script src="js/sample.js"></script>
17</body>
18</html>
19

JavaScript
1
2 var dataList = {
3    name:"ルートディレクトリ",
4    children:[
5        { name:"ファイル1" },
6        { name:"ファイル2" },
7        { 
8            name:"フォルダA",
9            children:[
10                { name:"ファイルC" },
11                { name:"ファイルD" },
12                { name:"ファイルE" },
13                { name:"フォルダB",
14                    children:[
15                        { name:"ファイルF" },
16                    ]
17                }
18            ]
19        }
20    ]
21};
22var svgWidth = 320; // SVG領域の横幅
23var svgHeight = 240;    // SVG領域の縦幅
24var offsetY = 10;   // 全体の位置調整用
25var svg = d3.select("#myGraph").append("svg")
26    .attr("width", svgWidth).attr("height", svgHeight)
27var color = d3.scale.category10();  // 10色を指定
28// ツリーレイアウト
29var tree = d3.layout.tree()
30    .size([320, 220])   // ツリーノードの描画範囲を指定
31var nodes = tree.nodes(dataList);   // ノードを抽出
32// ツリーの線を描く
33svg.selectAll("path")   // パスを対象にする
34    .data(tree.links(nodes))    // リンク情報を読み込む
35    .enter()
36    .append("path") // パスを生成する
37    .attr("d", d3.svg.diagonal())//ノード間を絆ぐ
38    .attr("fill", "none")
39    .attr("stroke", "#aaa")
40    .attr("stroke-width", 1)
41    .attr("transform", "translate(0, "+offsetY+")")
42// ツリーの開始点、分岐点、末端を●で表示する
43svg.selectAll("circle") // 円を選択
44    .data(nodes)
45    .enter()
46    .append("circle")   // 円を追加
47    .attr("cx", function(d){ return d.x })  // 中心のX座標を設定
48    .attr("cy", function(d){ return d.y+offsetY })  // 中心のY座標を設定
49    .attr("r", 10)  // 半径を設定
50    .style("stroke", "red") // 色を設定
51    .style("fill", "white") // 塗りを白色にする
52// 階層を示す値を表示する
53svg.selectAll("text")
54    .data(nodes)
55    .enter()
56    .append("text") // 文字の要素を追加
57    .attr("x", function(d){ return d.x })
58    .attr("y", function(d){ return d.y+14 })
59    .attr("text-anchor", "middle")  // 座標の中央から描画
60    .attr("font-size", 14)  // 14ptにする
61    .attr("font-weight", "bold")    // 太字にして読みやすくする
62    .text(function(d){
63        return d.name; // 深さを表示する
64    })
65    .style("fill", "black");    // 塗りを黒色にする
66

行動規範の内容に同意します

回答1件

ベストアンサー

参考にされているサイトに書いてあるとおり、下記の箇所が○と階層値を表示する処理になっています。

js
1// ツリーの開始点、分岐点、末端を●で表示する
2svg.selectAll("circle") // 円を選択
3    .data(nodes)
4    .enter()
5    .append("circle")   // 円を追加
6    .attr("cx", function(d){ return d.x })  // 中心のX座標を設定
7    .attr("cy", function(d){ return d.y+offsetY })  // 中心のY座標を設定
8    .attr("r", 10)  // 半径を設定
9    .style("stroke", "red") // 色を設定
10    .style("fill", "white") // 塗りを白色にする
11// 階層を示す値を表示する
12svg.selectAll("text")
13    .data(nodes)
14    .enter()
15    .append("text") // 文字の要素を追加
16    .attr("x", function(d){ return d.x })
17    .attr("y", function(d){ return d.y+14 })
18    .attr("text-anchor", "middle")  // 座標の中央から描画
19    .attr("font-size", 14)  // 14ptにする
20    .attr("font-weight", "bold")    // 太字にして読みやすくする
21    .text(function(d){
22        return d.depth; // 深さを表示する
23    })
24    .style("fill", "black");    // 塗りを黒色にする

あとは前回の質問にあったコードに上記の処理を組み込み、位置を微調整すればやりたいことは出来るようになるかなと思います。
difff等を用いて差分を確認しながら、どういった動作をしているのか確認するとより理解が深まると思います。
https://codesandbox.io/s/d3-2021-8-27-forked-to177d?file=/src/index.js:1533-1929

投稿2022/12/14 11:48