如何将@visx层级树视图根节点置于左上且各层级节点顶部对齐

要实现根节点位于左上角、每层级子节点从上到下垂直对齐的树状UI，你可以通过自定义VISX的树布局计算来调整节点位置，以下是具体实现方案：

1. 自定义布局坐标计算 #

VISX默认的tree布局无法直接满足需求，我们需要手动调整每个节点的x/y坐标，确保：

• 根节点位于左上角（x=0, y=0附近）
• 同一层级的节点x坐标固定，按层级递进
• 同层级节点y坐标从上到下依次递增

import { tree } from '@visx/hierarchy';

// 配置节点间距：[层间水平间距, 同层垂直间距]
const nodeSize = [150, 60];
const treeLayout = tree().nodeSize(nodeSize);

// 调整节点位置的核心逻辑
const getAdjustedTree = (data) => {
  const root = treeLayout(data);
  // 按层级分组节点
  const levelNodes = new Map();
  root.each(node => {
    if (!levelNodes.has(node.depth)) levelNodes.set(node.depth, []);
    levelNodes.get(node.depth).push(node);
  });

  // 为每个层级的节点设置坐标
  levelNodes.forEach((nodes, depth) => {
    nodes.forEach((node, index) => {
      // x坐标：层级 * 水平间距
      node.x = depth * nodeSize[0];
      // y坐标：同层索引 * 垂直间距（从上到下排列）
      node.y = index * nodeSize[1];
    });
  });

  return root;
};

2. 渲染节点与链接 #

基于调整后的节点坐标，使用VISX的图形组件渲染节点和链接：

import React from 'react';
import { LinkHorizontal } from '@visx/shape';

const AlignedTree = ({ width, height, data }) => {
  const root = getAdjustedTree(data);

  return (
    <svg width={width} height={height}>
      {/* 渲染节点间的链接 */}
      {root.links().map((link, idx) => (
        <LinkHorizontal
          key={`link-${idx}`}
          data={link}
          stroke="#cccccc"
          strokeWidth={2}
        />
      ))}
      {/* 渲染节点（含文本） */}
      {root.descendants().map((node, idx) => (
        <g key={`node-${idx}`} transform={`translate(${node.x}, ${node.y})`}>
          <rect
            width={100}
            height={40}
            rx={4}
            fill="#ffffff"
            stroke="#333333"
            strokeWidth={2}
          />
          <text
            x={50}
            y={22}
            textAnchor="middle"
            dominantBaseline="middle"
            fontSize={14}
            fill="#333333"
          >
            {node.data.name}
          </text>
        </g>
      ))}
    </svg>
  );
};

// 示例数据
const sampleTreeData = {
  name: 'Root',
  children: [
    { name: 'Child 1', children: [{ name: 'Grandchild 1' }, { name: 'Grandchild 2' }] },
    { name: 'Child 2' },
    { name: 'Child 3', children: [{ name: 'Grandchild 3' }] },
  ],
};

// 组件使用示例
export default () => <AlignedTree width={600} height={300} data={sampleTreeData} />;

关键说明 #

• 使用nodeSize替代size配置布局，能更精准控制层级间距和同层节点间距
• 通过按层级分组调整坐标，确保每一层的节点垂直对齐，根节点自然落在左上角
• LinkHorizontal组件会自动生成父节点到子节点的水平折线链接，匹配布局结构

内容的提问来源于stack exchange，提问作者jithu reddy