antv x6 选中多个节点

在AntV X6中选中多个节点，您可以使用以下步骤：

1. 创建一个变量来存储选中的节点：

const selectedNodes = new Set();

2. 在节点上添加事件监听器，当节点被点击时将其添加到选中节点的集合中：

graph.on('node:click', ({ node }) => {
  const nodeId = node.getID();
  if (selectedNodes.has(nodeId)) {
    selectedNodes.delete(nodeId);
    // 取消选中节点的样式处理
    node.attr('body/style', { fill: '#ffffff' });
  } else {
    selectedNodes.add(nodeId);
    // 选中节点的样式处理
    node.attr('body/style', { fill: '#ffcc00' });
  }
});

3. 如果需要实现多选框的功能，您可以在画布上添加一个矩形框，监听鼠标事件来选择多个节点：

let selectionBox = null;
let startPoint = null;
let endPoint = null;

graph.on('blank:pointerdown', ({ x, y }) => {
  startPoint = { x, y };
  selectionBox = graph.addNode({
    shape: 'rect',
    attrs: {
      x,
      y,
      width: 0,
      height: 0,
      stroke: '#999999',
      fill: 'rgba(0,0,0,0.1)',
    },
    zIndex: 9999,
  });
});

graph.on('blank:pointermove', ({ x, y }) => {
  if (!startPoint || !selectionBox) return;

  endPoint = { x, y };
  const width = Math.abs(endPoint.x - startPoint.x);
  const height = Math.abs(endPoint.y - startPoint.y);
  const attrs = {
    width,
    height,
    x: startPoint.x < endPoint.x ? startPoint.x : endPoint.x,
    y: startPoint.y < endPoint.y ? startPoint.y : endPoint.y,
  };
  selectionBox.attr(attrs);
});

graph.on('blank:pointerup', () => {
  if (selectionBox) {
    const box = selectionBox.getBBox();
    graph.getNodes().forEach((node) => {
      const nodeBox = node.getBBox();
      if (box.intersect(nodeBox)) {
        const nodeId = node.getID();
        selectedNodes.add(nodeId);
        // 选中节点的样式处理
        node.attr('body/style', { fill: '#ffcc00' });
      }
    });
    selectionBox.remove();
    selectionBox = null;
    startPoint = null;
    endPoint = null;
  }
});

通过以上步骤，您就可以实现在AntV X6中选中多个节点的功能。希望对您有所帮助！如果您还有任何问题，请随时提问。