vue3 使用@antv/x6 拓扑图时 将树形数据转为拓扑需要的数据 , 水平方向展开

vue3 使用@antv/x6 拓扑图时 将树形数据转为拓扑需要的数据 , 水平方向展开

核心思路

1. 数据转换：递归遍历树形数据，生成 nodes（节点）和 edges（边）的基础结构（包含 id、label 等）。
2. 坐标计算：通过自定义水平树形布局算法，计算每个节点的 x/y 坐标（水平方向展开的核心）。
3. 渲染拓扑：将带坐标的节点和边加载到画布，实现水平树状拓扑图。

/**
 * 将树形数据转换为拓扑数据
 * @param {Object} treeRootData 树形数据的根节点数据
 * @param {Object} options 布局配置
 * @param {number} options.levelSep 水平方向层级间距（x轴间隔）
 * @param {number} options.nodeSep 垂直方向节点间距（y轴间隔）
 * @param {number} options.startX 根节点起始x坐标
 * @param {number} options.startY 根节点起始y坐标
 * @returns {Object} { nodes: [], edges: [] } 带x/y坐标的拓扑数据
 */
function treeToHorizontalTopology(treeRootData, options = {}) {
  // 默认布局配置（水平方向：x轴为层级，y轴为同层节点）
  const {
    levelSep = 200, // 水平层级间距（每级x增加200）
    nodeSep = 80,   // 同层节点垂直间距（y轴间隔80）
    startX = 100,   // 根节点x起始位置
    startY = 300,   // 根节点y起始位置
  } = options;

  // 存储所有节点和边
  const nodes = [];
  const edges = [];

  // 递归计算节点坐标并生成数据
  function traverse(node, parentId, level) {
    // 1. 计算当前节点的x坐标（水平方向：层级决定x）
    const x = startX + level * levelSep;

    // 2. 计算当前节点的y坐标（垂直方向：同层节点按顺序排列）
    // 先获取当前层级的所有已添加节点，确定当前节点的位置
    const siblingsInLevel = nodes.filter(n => n.level === level);
    const y = startY + siblingsInLevel.length * nodeSep;

    // 3. 添加当前节点（包含x/y坐标和层级信息）
    const currentNode = {
      id: node.id,
      label: node.label,
      x,
      y,
      level, // 记录层级，用于计算同层节点位置
      width: 100, // 节点宽度（可自定义）
      height: 40, // 节点高度（可自定义）
    };
    nodes.push(currentNode);

    // 4. 若有父节点，添加边
    if (parentId) {
      edges.push({
        source: parentId,
        target: node.id,
        router: { name: 'manhattan' }, // 水平树推荐用直角路由
      });
    }

    // 5. 递归处理子节点（层级+1）
    if (node.children && node.children.length) {
      node.children.forEach(child => {
        traverse(child, node.id, level + 1);
      });
    }
  }

  // 从根节点开始遍历（根节点层级为0）
  traverse(treeData, null, 0);

  return { nodes, edges };
}

• 使用

import { Graph } from '@antv/x6';

// 1. 定义树形数据
const treeData = {
  id: 'root',
  label: '根节点',
  children: [
    {
      id: 'node1',
      label: '节点1',
      children: [
        { id: 'node1-1', label: '节点1-1' },
        { id: 'node1-2', label: '节点1-2' },
      ],
    },
    {
      id: 'node2',
      label: '节点2',
      children: [
        { id: 'node2-1', label: '节点2-1' },
      ],
    },
    { id: 'node3', label: '节点3' },
  ],
};

// 2. 转换的拓扑数据
const { nodes, edges } = treeToHorizontalTopology(treeData, {
  levelSep: 250, // 水平层级间距（调大更宽松）
  nodeSep: 100,  // 同层节点垂直间距
  startX: 50,    // 根节点x起点
  startY: 300,   // 根节点y起点（垂直居中）
});

// 3. 初始化画布
const graph = new Graph({
  container: document.getElementById('container'),
  width: 1200,
  height: 600,
  background: {
    color: '#f5f5f5',
  },
});

// 4. 加载节点和边
graph.addNodes(nodes);
graph.addEdges(edges);

// 5. 可选：美化节点样式
graph.getNodes().forEach(node => {
  node.setAttrs({
    body: {
      fill: '#fff',
      stroke: '#52c41a',
      strokeWidth: 2,
    },
    label: {
      fill: '#333',
      fontSize: 14,
    },
  });
});

// 6. 可选：美化边样式
graph.getEdges().forEach(edge => {
  edge.setAttrs({
    line: {
      stroke: '#999',
      strokeWidth: 1.5,
    },
  });
});