antv/x6 删除节点时 向下关联节点删除

在 AntV X6 中，如果你希望在删除一个节点时同时删除其所有“向下”关联的节点（即，从被删除节点出发，通过边可以到达的所有节点，但不包括反向可达的节点），你可以通过图的遍历算法来实现这一点。这通常意味着你需要执行深度优先搜索（DFS）或广度优先搜索（BFS），从被删除的节点开始，沿着边向下遍历，并收集所有可达的节点。

以下是一个使用 DFS 的示例代码，展示了如何在删除一个节点时删除其所有向下关联的节点：

import { Graph } from '@antv/x6';  
  
// 初始化图  
const graph = new Graph({  
  container: document.getElementById('container'),  
  width: 800,  
  height: 600,  
  grid: true,  
});  
  
// 示例数据  
const data = {  
  nodes: [  
    { id: 'node1', label: 'Node 1' },  
    { id: 'node2', label: 'Node 2' },  
    { id: 'node3', label: 'Node 3' },  
    { id: 'node4', label: 'Node 4' },  
  ],  
  edges: [  
    { source: 'node1', target: 'node2' },  
    { source: 'node2', target: 'node3' },  
    { source: 'node3', target: 'node4' },  
    // 注意：没有从 node2 到 node1 的边，也没有从 node3 或 node4 回到上面的节点的边  
  ],  
};  
  
// 加载数据  
graph.fromJSON(data);  
  
// 定义查找向下关联节点的方法（DFS）  
function findDownstreamNodes(graph, nodeId) {  
  const visited = new Set();  
  const downstreamNodes = new Set();  
  
  function dfs(currentNodeId) {  
    if (visited.has(currentNodeId)) return;  
    visited.add(currentNodeId);  
    downstreamNodes.add(currentNodeId);  
  
    graph.getConnectedEdges(currentNodeId).forEach(edge => {  
      const targetId = edge.target.id; // 只考虑向下的边（从当前节点出发的边）  
      if (!visited.has(targetId)) {  
        dfs(targetId);  
      }  
    });  
  }  
  
  dfs(nodeId);  
  return downstreamNodes;  
}  
  
// 监听节点删除事件  
graph.on('node:removed', ({ node }) => {  
  const downstreamNodes = findDownstreamNodes(graph, node.id);  
 downstreamNodes.forEach(id => {
 
 graph.removeCell(graph.getCellById(id)); //removeCell（单个）： 单个线或者节点删除；removeCells（放的是一个数组）：多个线或者节点删除；
 
 });  
   
});  
  
// 示例：删除节点  
graph.removeCells(graph.getCellById('node1')); // 这将删除 node1, node2, node3, 和 node4