使用指南交互

交互总览

查看内置交互，配置、切换和卸载交互，并监听图事件。

在 GitHub 查看源码

什么是交互

交互（Behavior）决定用户操作图时会发生什么。比如拖动空白处平移画布，滚动滚轮缩放，点击节点切换选中状态。

内置交互

内置交互可直接在 behaviors 中使用。点击交互名称可查看配置和示例。

分类交互名称类型功能说明
导航拖动画布drag-canvas从画布空白处拖动，平移整张图。
导航缩放画布zoom-canvas滚动鼠标滚轮，以画布中心为基准缩放。
选择点击选中click-select点击节点或边切换选中状态，点击画布空白处清空选择。
选择框选brush-select拖出矩形，选中中心落在矩形内的节点。
选择套索选择lasso-select沿自由轮廓拖动，选中中心落在圈内的节点。
编辑拖动节点与分组drag-node拖动节点，或从分组空白处拖动整个分组。
编辑拖动边端点drag-edge拖动已有边的端点，松开时通过事件获取重连目标。
数据探索悬停高亮节点highlight-node悬停节点时，突出该节点及与它直接相连的节点和边。
数据探索悬停高亮边highlight-edge悬停边时，突出这条边及其两端节点。
数据探索邻域高亮hover-highlight悬停时高亮节点的邻域，或高亮边及其两端节点。
数据探索提示框 Tooltiptooltip悬停或点击节点和边时，显示它们的详细信息。

自定义交互

需要复用一组业务操作时，可以把事件处理封装为自定义交互，注册后通过名称启用。 查看自定义交互

配置和使用

基本配置

交互列表写在 new Graph() 的 behaviors 里。使用名称即可采用默认参数。省略 behaviors 时，默认开启滚轮缩放和画布平移。

import { Graph } from '@antv/g6-lite';

const graph = new Graph({
  container,
  data,
  behaviors: ['drag-canvas', 'zoom-canvas', 'click-select'],
});

await graph.render();

配置交互参数

交互名称通过 type 指定，其他参数和 type 写在同一层。下方示例可以点击选中、按住 Shift 追加选择，也可以从空白处拖动框选。

正在加载示例…
空白处拖拽框选；Shift+单击追加选择；拖动已选节点整体移动；单击空白清空，重置恢复
const behaviors = [
  { type: 'zoom-canvas', minZoom: 0.5, maxZoom: 2 },
  'drag-node',
  { type: 'click-select', multiple: true, trigger: 'shift' },
  { type: 'brush-select', key: null },
] satisfies Array<BehaviorName | BuiltInBehaviorConfig>;

动态更新交互

运行中通过 setBehaviors() 替换整份交互列表。数组中写上要启用的所有交互。

graph.setBehaviors(['drag-canvas', { type: 'zoom-canvas', sensitivity: 0.5 }]);

试用动态切换示例

卸载交互

传入空数组可关闭全部交互。省略参数可恢复默认的平移和缩放。

graph.setBehaviors([]);

交互与事件

需要在点击节点后更新业务界面时，可以用 graph.on() 监听 node:click。组件卸载时，用同一个处理函数取消监听。

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

// 组件卸载时
graph.off('node:click', onNodeClick);

交互通用配置项 · 事件指南

自定义布局

注册坐标计算，处理配置、取消信号和清理，并区分 Graph 执行与独立计算

交互通用配置项

组合浏览、选择、拖动、高亮和 Tooltip，并连接业务事件

目录

什么是交互内置交互自定义交互配置和使用基本配置配置交互参数动态更新交互卸载交互交互与事件