antvx6滚动插件

### AntV X6 滚动插件使用教程

对于AntV X6图形编辑器中的滚动功能实现，并未直接提及通过特定的“滚动插件”来完成这一操作[^1]。然而，在实际应用中，通常会借助于X6提供的API以及HTML/CSS原生特性相结合的方式达成页面内图表区域可滚动的效果。

#### 实现思路

- **容器设置**：确保画布所在的DOM元素具有固定的宽度和高度属性；当图形容器内的内容超出该尺寸时，则可以触发浏览器默认的溢出显示机制。

- **启用网格适配**：如果项目中有用到`Grid`组件的话，可能还需要调整其配置使得即使是在存在水平或垂直方向上的滚动条情况下也能正常工作[^2]。

#### 示例代码

下面给出一段简单的示例代码用于展示如何创建一个带有自定义大小并支持滚动作业的绘图板：

import { Graph } from '@antv/x6';

// 初始化Graph实例
const graph = new Graph({
  container: document.getElementById('container'), // 容器ID
  width: 800,
  height: 600,
  background: {
    color: '#f5f5f5' // 设置背景颜色
  },
});

// 添加一些节点作为演示数据
graph.addNode({ x: 50, y: 50, width: 100, height: 40, label: 'Node 1' });
graph.addEdge({
  source: { x: 170, y: 90 },
  target: { x: 300, y: 90 }
});

为了使上述例子能够响应用户的鼠标滚轮事件从而平移视图，可以在初始化Graph对象之后添加如下监听逻辑：

document.addEventListener('wheel', (e) => {
  e.preventDefault();
  const delta = Math.sign(e.deltaY);
  graph.translate(0, delta * 10); // 调整这里的数值控制每次滚动的距离
}, { passive: false });

此段脚本实现了基本的手势交互体验——即利用鼠标的上下滑动改变整个场景的位置偏移量，进而达到视觉上类似于“滚动”的效果。