交互 | G6 图可视化引擎

交互概述

交互（Behavior）是 G6 的核心构建模块，它精确定义了用户与图之间的互动行为。每个 Behavior 插件都是一个高度封装的功能单元，内部集成了特定场景下的事件监听、状态管理和响应处理逻辑。

G6 的内置 Behavior 涵盖了大多数常见交互需求，同时提供了灵活的扩展机制，支持开发者根据业务场景构建定制化交互体验。有关完整的交互行为类型、配置选项及开发示例，请参阅交互总览章节。

API 参考

Graph.getBehaviors()

获取当前图表中所有已配置的交互行为。

getBehaviors(): BehaviorOptions;

返回值

类型: BehaviorOptions
描述: 当前图表中已配置的所有交互行为

示例

// 获取当前所有交互行为
const behaviors = graph.getBehaviors();
console.log('当前图表的交互行为:', behaviors);

Graph.setBehaviors(behaviors)

设置图表的交互行为，将替换所有现有的交互行为。

setBehaviors(behaviors: BehaviorOptions | ((prev: BehaviorOptions) => BehaviorOptions)): void;

参数

参数	描述	类型	默认值	必选
behaviors	新的交互行为配置，或一个基于当前配置返回新配置的函数	BehaviorOptions \| (prev: BehaviorOptions) => BehaviorOptions	-	✓

说明

设置的交互会全量替换原有的交互，如果需要新增交互可以使用函数式更新：

graph.setBehaviors((behaviors) => [...behaviors, { type: 'zoom-canvas' }]);

示例 1: 设置基本交互

// 设置基本交互
graph.setBehaviors([
  'drag-canvas', // 拖拽画布
  'zoom-canvas', // 缩放画布
  'drag-element', // 拖拽元素
]);

示例 2: 设置带配置的交互

graph.setBehaviors([
  // 字符串形式（使用默认配置）
  'drag-canvas',

  // 对象形式（自定义配置）
  {
    type: 'zoom-canvas',
    key: 'my-zoom', // 指定唯一标识，用于后续更新
    sensitivity: 1.5, // 缩放灵敏度
  },

  // 只有节点上启用拖拽
  {
    type: 'drag-element',
    key: 'drag-node-only',
    enable: (event) => event.targetType === 'node', // 仅在节点上启用拖拽
  },
]);

示例 3: 使用函数式更新

// 添加新的交互行为
graph.setBehaviors((currentBehaviors) => [
  ...currentBehaviors,
  {
    type: 'brush-select',
    key: 'selection-brush',
  },
]);

// 替换特定交互行为
graph.setBehaviors((currentBehaviors) => {
  // 过滤掉现有的缩放交互
  const filteredBehaviors = currentBehaviors.filter((behavior) => {
    if (typeof behavior === 'string') return behavior !== 'zoom-canvas';
    return behavior.type !== 'zoom-canvas';
  });

  // 添加新的缩放交互配置
  return [
    ...filteredBehaviors,
    {
      type: 'zoom-canvas',
      key: 'new-zoom',
      enableOptimize: true,
    },
  ];
});

Graph.updateBehavior(behavior)

更新指定的交互行为配置，需要通过 key 标识要更新的交互。

updateBehavior(behavior: UpdateBehaviorOption): void;

参数

参数	描述	类型	默认值	必选
behavior	更新的交互行为配置	UpdateBehaviorOption	-	✓

说明

如果要更新一个交互，必须在原始交互配置中指定 key 字段，以便能够准确找到并更新该交互。

示例 1: 更新交互配置

// 初始设置交互时指定 key
graph.setBehaviors([
  {
    type: 'zoom-canvas',
    key: 'my-zoom-canvas',
    sensitivity: 1.0,
  },
]);

// 更新交互配置
graph.updateBehavior({
  key: 'my-zoom-canvas', // 指定要更新的交互
  sensitivity: 2.0, // 新的缩放灵敏度
  enableOptimize: true, // 添加新配置
});

示例 2: 禁用/启用交互

// 设置带 key 的行为
graph.setBehaviors([
  {
    type: 'drag-canvas',
    key: 'main-drag',
  },
  {
    type: 'zoom-canvas',
    key: 'main-zoom',
  },
]);

// 禁用拖拽功能
graph.updateBehavior({
  key: 'main-drag',
  enable: false,
});

// 稍后重新启用
setTimeout(() => {
  graph.updateBehavior({
    key: 'main-drag',
    enable: true,
  });
}, 5000);

类型定义

BehaviorOptions

type BehaviorOptions = (string | CustomBehaviorOption | ((this: Graph) => CustomBehaviorOption))[];

type CustomBehaviorOption = {
  // 交互类型
  type: string;

  // 交互 key，即唯一标识，用于标识交互，从而进一步操作此交互
  key?: string;

  // 针对不同类型的交互，还可能有其他配置项
  [configKey: string]: any;
};

UpdateBehaviorOption

type UpdateBehaviorOption = {
  // 要更新的交互的唯一标识
  key: string;

  // 其他要更新的配置项
  [configKey: string]: unknown;
};