AntV/X6

AntV/X6 是一个功能强大的图编辑引擎，提供了灵活的节点定制、连接管理和交互控制能力，适用于构建流程图、ER 图、组织架构图等各类可视化应用。

节点寻址

实现代码

/**
 * 根据BFS算法查找节点间路径
 * @param graph 画布实例
 * @param startId 开始节点ID
 * @param endId 结束节点ID
 * @returns 返回路径上的边及方向数组
 */
function findPath(graph, startId, endId) {
  // 广度优先搜索的队列
  const queue = [];
  // 访问过的节点
  const visited = new Set();
  // 路径上的边
  const paths = {};

  queue.push(startId);
  visited.add(startId);
  paths[startId] = [];

  while (queue.length > 0) {
    const current = queue.shift();

    if (current === endId) {
      return paths[current]; // 返回路径
    }

    const edges = graph.getEdges();

    edges.forEach((edge) => {
      const source = edge.getSourceCell().id;
      const target = edge.getTargetCell().id;

      if (source === current && !visited.has(target)) {
        visited.add(target);
        queue.push(target);
        // 保存路径上的边
        // 1表示从源到目标，用来表示边的走向
        paths[target] = [...paths[current], { edge: edge.id, direction: 1 }];
      } else if (target === current && !visited.has(source)) {
        visited.add(source);
        queue.push(source);
        // 保存路径上的边
        // -1表示从目标到源，用来表示边的走向
        paths[source] = [...paths[current], { edge: edge.id, direction: -1 }];
      }
    });
  }

  // 如果没有路径
  return [];
}

代码解析

该函数基于**广度优先搜索（BFS）**算法实现，用于查找图中两个节点之间的路径，主要特点如下：

1. 数据结构：

   • queue：存储待访问节点的队列，实现 BFS 的核心
   • visited：记录已访问过的节点，避免重复访问
   • paths：记录从起始节点到各节点的路径信息

2. 路径表示：

   • 返回路径信息包含边 ID 和方向，其中：
     • direction: 1 表示从源节点指向目标节点
     • direction: -1 表示从目标节点指向源节点

3. 搜索过程：

   • 从起始节点开始，逐层访问相邻节点
   • 对每条边，检查源节点和目标节点是否为当前节点的邻居
   • 当找到目标节点时，返回完整路径；若队列为空仍未找到，则返回空数组表示无路径

使用方法

基本使用

// 假设有一个已经初始化的graph实例
const graph = new X6.Graph({...});

// 查找两个节点之间的路径
const path = findPath(graph, 'node1', 'node5');

if (path.length > 0) {
  console.log('找到路径:', path);
  // 路径格式: [{ edge: 'edge1', direction: 1 }, { edge: 'edge3', direction: 1 }]
}
else {
  console.log('未找到路径');
}

高亮显示路径

结合 AntV/X6 的样式 API，可以高亮显示找到的路径：

function highlightPath(graph, path) {
  // 清除所有边的高亮
  graph.getEdges().forEach((edge) => {
    edge.attr("line/stroke", "#91d5ff"); // 恢复默认颜色
  });

  // 高亮路径上的边
  path.forEach((item) => {
    const edge = graph.findById(item.edge);
    if (edge) {
      edge.attr("line/stroke", "#ff4d4f"); // 设置高亮颜色
      edge.attr("line/strokeWidth", 2); // 加粗
    }
  });
}

// 使用示例
const path = findPath(graph, "nodeA", "nodeB");
if (path.length > 0) {
  highlightPath(graph, path);
}