G6 获取视口内的节点

在G6图形库中，获取视口范围内的节点通常涉及到图形布局后的遍历操作。你可以通过以下步骤来获取：

1. 首先，确保你已经加载了G6并创建了一个Graph实例。

import G6 from '@antv/g6';

const graph = new G6.Graph({
  container: 'container', // 渲染容器id
  width: 800,
  height: 600,
  modes: {
    pan: true,
    zoom: {
      enabled: true,
      start: function () {
        this.getViewport().fit(); // 初始化缩放至可视图区域
      },
    },
  },
});

2. 然后，在图形布局完成（例如`layout()`方法执行后），可以监听视口变化的事件（如`viewportChange`），并在事件处理函数中获取当前可视区内的节点。

graph.on('viewportChange', ({ viewport }) => {
  const nodesInView = graph.getNodes().filter(node => {
    return viewport.intersects({ x: node.x, y: node.y, width: node.size.width, height: node.size.height });
  });

  console.log('Nodes within viewport:', nodesInView);
});

在这个例子中，`viewport.intersects()`方法检查给定的节点是否位于视口范围内。