使用指南交互

交互通用配置项

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

在 GitHub 查看源码

交互列表写在 new Graph() 的 behaviors 里。各项用途见交互总览。

BehaviorOption

默认参数可直接用交互名称，例如 'drag-canvas'。需要调整参数时，写成对象，交互名称放在 type，参数放在同一层。

查看 11 个内置行为的逐项效果。

配置平移、框选和套索

空白处拖动用于平移。按住 Shift 拖动用于框选，按住 Ctrl 或 Meta 拖动用于套索。

import type { BehaviorName, BuiltInBehaviorConfig } from '@antv/g6-lite';

const behaviors = [
  'zoom-canvas',
  { type: 'drag-canvas', ignoreModifierKeys: true },
  'drag-node',
  { type: 'click-select', multiple: true, trigger: 'shift' },
  { type: 'brush-select', key: 'shift' },
  { type: 'lasso-select', key: 'ctrl' },
] satisfies Array<BehaviorName | BuiltInBehaviorConfig>;

可在选择交互示例中试用这三种操作。点击多选的 ctrl 和 meta 可分别设置，区域选择设为 ctrl 时接受两者。完整规则见选择参考。

运行中切换交互

选择 Browse 拖动空白处平移。选择 Select 在空白处拖动框选，也可单击节点选中。切回 Browse 或选 Off 后，已选节点和当前视野保留。

正在加载示例…
标签与图标独立配置
if (mode === 'select') {
  graph.updateOptions({ behaviors: ['zoom-canvas', 'click-select', 'brush-select'] });
} else if (mode === 'browse') {
  graph.setBehaviors(['zoom-canvas', 'drag-canvas']);
} else {
  graph.setBehaviors([]);
}

提交完整列表。setBehaviors([]) 关闭全部行为，setBehaviors() 恢复默认缩放和平移。完整规则见 setBehaviors()。

设置滚轮缩放

滚轮缩放速度用 sensitivity 设置，最小和最大缩放倍数通过 minZoom 和 maxZoom 限定。完整默认值见导航参考。

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

邻域高亮

高亮范围用 degree 设置。示例设为 1，鼠标移到 B 上时，B 和与它直接相连的节点、边会高亮。高亮颜色通过 stateStyles.highlight 设置。

正在加载示例…
悬停 B 查看一度邻域；悬停边查看两端；移开清理高亮，拖动空白平移
behaviors: ['zoom-canvas', 'drag-canvas', { type: 'hover-highlight', degree: 1, inactiveState: 'inactive' }],

Tooltip

在 behaviors 中启用 tooltip，为节点和边显示信息。根据场景选择悬停预览或点击查看详情。

自定义内容

悬停延迟通过 delay 设置，显示范围通过 enable 控制。示例悬停 120 毫秒后显示 API、DB 或边的信息，Cache 不显示提示框。

正在加载示例…
悬停 API、DB 或边显示，等待 120ms；移开隐藏，Cache 节点不显示
const tooltip: BuiltInBehaviorOptionsMap['tooltip'] = {
  type: 'tooltip', trigger: 'hover', delay: 120, className: 'docs-hover-tooltip',
  enable: (ctx) => ctx.nodeId !== 'Cache',
  getContent: (ctx) => {
    const card = document.createElement('div');
    card.style.cssText = 'padding:10px 14px;border-radius:8px;background:#163B65;color:white;font:12px system-ui;box-shadow:0 4px 16px #163b6533;';
    const title = document.createElement('strong');
    title.textContent = String(ctx.data?.label ?? ctx.nodeId ?? ctx.edgeId ?? '');
    const detail = document.createElement('div');
    detail.textContent = ctx.itemType === 'node'
      ? `Requests: ${Number(ctx.data?.requests ?? 0)}`
      : `${ctx.source} → ${ctx.target}`;
    card.append(title, detail);
    return card;
  },
};

点击显示

触发方式设为 trigger: 'click' 后，点击元素显示提示框。再次点击同一个元素或点击空白处即可关闭。

正在加载示例…
单击 API、DB 或边显示；再点相同元素或空白关闭；Cache 节点被 enable 排除
const tooltip: BuiltInBehaviorOptionsMap['tooltip'] = {
  type: 'tooltip', trigger: 'click', className: 'docs-click-tooltip',
  enable: (ctx) => ctx.nodeId !== 'Cache',
  getContent: (ctx) => {
    const card = document.createElement('div');
    card.style.cssText = 'padding:10px 14px;border-radius:8px;background:#163B65;color:white;font:12px system-ui;box-shadow:0 4px 16px #163b6533;';
    const title = document.createElement('strong');
    title.textContent = String(ctx.data?.label ?? ctx.nodeId ?? ctx.edgeId ?? '');
    const detail = document.createElement('div');
    detail.textContent = ctx.itemType === 'node'
      ? `Requests: ${Number(ctx.data?.requests ?? 0)}`
      : `${ctx.source} → ${ctx.target}`;
    card.append(title, detail);
    return card;
  },
};

配置项

完整默认值、函数签名、container 和 TooltipContext 字段统一查 TooltipOptions 与 TooltipContext。ctx.event 是原始鼠标事件；它与普通 Graph 事件的 nativeEvent 命名不同。

默认内容取节点的 data.label 或 ID，边取 data.label 或两端名称。内容通过 getContent 自定义。业务值可通过元素的 textContent 填入，返回 HTML 字符串时需要转义其中的动态内容。

样式

库只负责定位与显隐，不附带视觉皮肤。两个示例直接在返回元素上设置样式；也可给浮层 className 配置样式，例如默认类名：

.g6lite-tooltip {
  padding: 8px 12px;
  border-radius: 8px;
  background: #163b65;
  color: white;
  font-size: 12px;
}

默认挂载 document.body，按视口定位并在边缘翻转。自定义 container 同时改变挂载与碰撞边界，需检查定位祖先、滚动和裁剪；不要假定祖先的 transform 不影响 fixed 定位。

Tooltip 常见问题

为什么卡片没有背景，或者点击不了？

库没有内置视觉皮肤，需要业务 CSS。浮层默认 pointer-events: none；需要按钮、表单或可交互卡片时，用应用自己的浮层承接。

为什么 Combo 上没有 Tooltip？

内置 tooltip 只处理 node/edge。Combo 说明可用公开事件结合业务浮层实现，不使用内部拾取接口。

更新数据后，已打开的内容会立即更新吗？

不会因 setData 自动重建 Tooltip；在后续指针事件中重新读取内容。用 setBehaviors 替换列表可切换 Tooltip 配置，旧 Tooltip 的监听、计时器和浮层会被清理。

监听交互事件

节点点击通过 node:click 监听。需要让点击同时切换选中状态时，再启用 click-select。

const onNodeClick = ({ nodeId }: { nodeId: string }) => console.log(nodeId);
graph.on('node:click', onNodeClick);
// 组件卸载时：
graph.off('node:click', onNodeClick);

选中联动同时关注 node:selectchange、edge:selectchange、brush:end、lasso:end；需要最终集合时主动查询状态，不能假定所有选择来源都逐个发出 node:selectchange。接入与清理代码见事件指南，完整入参查事件参考。

连线编辑与底层分发

drag-edge 发出重连建议，不自动修改 source/target，也没有跟随鼠标的临时连线。业务接收 edge:dragend，验证 reconnected 后更新自己的边数据，再通过 setData 等公开入口写回。若配置了 layout，setData 仍会重新计算布局；fitView: false 只保留相机。

命中优先级依次是节点、边、分组和画布。

常见问题

加上 tooltip 后为什么不能缩放了？

显式 behaviors 替换默认列表，把 zoom-canvas 和 drag-canvas 一并写入。

框选时为什么画布也在动？

将框选绑定 Shift，保留 drag-canvas 的 ignoreModifierKeys: true；不要让框选和套索使用相同手势。

可以用 updateOptions 动态切换 Behavior 吗？

可以。仅切换交互时用 setBehaviors()。同时更新样式时，可在 updateOptions() 里传入 behaviors。

相关

相关可运行示例

交互总览

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

拖动画布

从画布空白处拖动，平移整张图。

目录

BehaviorOption配置平移、框选和套索运行中切换交互设置滚轮缩放邻域高亮Tooltip自定义内容点击显示配置项样式Tooltip 常见问题为什么卡片没有背景，或者点击不了？为什么 Combo 上没有 Tooltip？更新数据后，已打开的内容会立即更新吗？监听交互事件常见问题加上 tooltip 后为什么不能缩放了？框选时为什么画布也在动？可以用 updateOptions 动态切换 Behavior 吗？相关