Antv G6 自定义缩放

AntV G6 是一个基于声明式图数据流的可视化库，它提供了一种灵活的方式来定制图形的交互，包括缩放功能。自定义缩放可以通过以下步骤实现：

1. **设置视口**：首先，你需要创建一个视口对象并指定其范围，这将作为缩放的基础区域。例如：

   const viewport = new g6.Viewport({
     width: graph.width,
     height: graph.height,
   });

2. **监听事件**：通过监听`viewport.viewbox`的变化事件，你可以追踪用户的缩放操作。可以使用`on('viewbox', callback)`来添加回调函数：

   viewport.on('viewbox', (event) => {
     // event.viewbox 存储了新的视口范围
   });

3. **处理缩放**：在回调中，你可以根据需要更新视口、图形布局或调整节点大小等。比如，当用户双击缩放时，你可以调整视口比例：

   function zoomIn(e) {
     viewport.scale(e.deltaY > 0 ? 1.1 : 1 / 1.1);
   }

4. **绑定事件**：最后，将上述缩放函数绑定到合适的事件上，如`mousedown`：

   graph.on('mousedown', zoomIn);

记得在结束缩放时移除事件监听，或者在视口不再变化时关闭监听。