在d3.js v5上旋转树形图(从水平到垂直)

<script src="https://d3js.org/d3.v5.min.js"></script>

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("data.json").then(function(data) {
  // 处理数据并绘制树形图
});

var root = d3.hierarchy(data);

var treeLayout = d3.tree()
                   .size([height, width - margin.left - margin.right]);

var treeData = treeLayout(root);

var links = svg.selectAll(".link")
               .data(treeData.links())
               .enter()
               .append("path")
               .attr("class", "link")
               .attr("d", d3.linkVertical()
                            .x(function(d) { return d.x; })
                            .y(function(d) { return d.y; }));

var nodes = svg.selectAll(".node")
               .data(treeData.descendants())
               .enter()
               .append("g")
               .attr("class", "node")
               .attr("transform", function(d) {
                 return "translate(" + d.x + "," + d.y + ")";
               });

nodes.append("circle")
     .attr("r", 6);

nodes.append("text")
     .attr("dy", "0.31em")
     .attr("x", function(d) { return d.children ? -20 : 20; })
     .text(function(d) { return d.data.name; });

function rotate() {
  treeLayout.size([width - margin.top - margin.bottom, height - margin.left - margin.right]);
  treeLayout(root);
  update(root);
}

function update(source) {
  // 更新树形图的布局和连接线
}