配置指南

交互配置

内置 behaviors、启用方式和常用交互组合

未配置 behaviors 时,画布默认启用滚轮缩放和拖拽平移,等价于 ['zoom-canvas', 'drag-canvas']。每个 behavior 可以写成字符串,也可以写成配置对象。

显式传入数组时,该数组就是完整行为列表;使用 behaviors: [] 可关闭默认画布导航。

behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'];
behaviors: ['drag-canvas', { type: 'brush-select', key: 'shift' }];

内置对象配置可通过 BuiltInBehaviorOptionsMap 按名称查询,BuiltInBehaviorConfig 是全部内置配置的联合类型。自定义 Behavior 应声明字面量 type 和独立 options 类型,并在配置处使用 satisfies 保留严格检查。

内置 behaviors

行为说明
zoom-canvas滚轮缩放画布
drag-canvas拖拽平移画布
drag-node拖拽移动节点,支持 Combo 整体拖拽
drag-edge拖拽边端点重新连线
click-select单击选中节点 / 边
hover-highlight悬停高亮节点或边
highlight-node悬停节点时高亮节点及一度邻居
highlight-edge悬停边时高亮边及两端节点
brush-select矩形框选
lasso-select自由套索选择
tooltip悬停或点击显示浮层

常用组合

浏览图:

behaviors: ['zoom-canvas', 'drag-canvas'];

浏览、拖拽和选择:

behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'];

分析型高亮:

behaviors: ['zoom-canvas', 'drag-canvas', 'hover-highlight', 'tooltip'];

Shift 框选,避免和拖拽画布冲突:

behaviors: ['drag-canvas', { type: 'brush-select', key: 'shift' }];

缩放手感与范围

zoom-canvas 默认按归一化 wheel delta 的百分比连续缩放,对鼠标滚轮和触控板使用同一套规则。默认 sensitivity 为 1,同一动画帧内的同方向事件会合并,单帧缩放变化最多为 15%,默认范围为 0.1 到 20。

behaviors: [
  {
    type: 'zoom-canvas',
    sensitivity: 0.5,
    minZoom: 0.2,
    maxZoom: 8,
  },
  'drag-canvas',
];

sensitivity 是 wheel delta 的百分比乘数:例如默认配置下 deltaY = -10 会放大约 10%,sensitivity: 0.5 会将响应减半。减小该值会让缩放更缓和;无效或非正数配置会回退到安全默认值。

事件分发模型

G6Lite 内部由 InteractionDispatcher 统一处理指针事件。它每次只做一次拾取,然后按 node -> edge -> combo -> canvas 的优先级发出规范事件。所有 behavior 都消费这些事件。

这意味着单击、双击、右键、滚轮、悬停等元素事件默认可监听,不需要额外启用单独的 click behavior。

graph.on('node:click', ({ nodeId }) => {
  console.log(nodeId);
});

相关