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

在d3.js v5上旋转树形图（从水平到垂直），您可以按照以下步骤进行操作：

导入d3.js库，确保你有正确的引入d3.js v5版本的库文件。

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

创建一个用于绘制树形图的SVG容器。

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

通过d3.json()方法加载树形数据。

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

对数据进行处理，并创建一个hierarchy对象。

var root = d3.hierarchy(data);

使用d3.tree()创建一个树布局。

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) {
  // 更新树形图的布局和连接线
}

最后，你可以调用rotate()函数来旋转树形图。这些步骤将帮助你在d3.js v5上从水平到垂直地绘制旋转树形图。请记住，这里只提供了一个大致的框架，你可能需要根据自己的需求进行调整和完善。