插件总览

什么是插件

插件(Plugin)是 G6 中最灵活的扩展机制，用户可以通过插件来扩展 G6 的功能，例如在画布中额外挂载图形组件、实现撤销重做等功能。

绝大多数的定制需求都可以通过插件来实现，G6 内置了一些常用的插件，例如：Tooltip、Grid、History。

内置插件

G6 提供了丰富的内置插件，涵盖多种常见功能场景：

各插件的详细配置可参考 内置插件文档。

配置方式

基本配置

在图实例初始化时，通过 plugins 数组指定需要的插件：

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

const graph = new Graph({
  // 其他配置...
  plugins: ['grid', 'minimap', 'tooltip'],
});

配置插件参数

对于需要自定义参数的插件，可以使用 object 形式配置属性：

const graph = new Graph({
  // 其他配置...
  plugins: [
    'grid',
    {
      type: 'tooltip',
      key: 'my-tooltip', // 为插件指定key，便于后续更新
      getContent: (e) => `<div>节点：${e.target.id}</div>`,
    },
  ],
});

动态更新插件

G6 支持在图实例运行期间动态管理插件，满足复杂交互需求：

通过 getPlugins 方法获取当前插件列表：

// 获取插件列表
const plugins = graph.getPlugins();
// console.log(plugins) 👉 ['minimap', 'grid']

可以通过 setPlugins 方法调整插件：

// 添加新插件
graph.setPlugins((plugins) => [...plugins, 'minimap']);

// 移除插件
graph.setPlugins((plugins) => plugins.filter((p) => p !== 'grid'));

可以通过 updatePlugin 方法更新插件的配置：

const graph = new Graph({
  // 其他配置...
  plugins: [
    {
      type: 'tooltip',
      key: 'my-tooltip',
      getContent: (e) => `<div>节点：${e.target.id}</div>`,
    },
  ],
});

// 更新单个插件
graph.updatePlugin({
  key: 'my-tooltip',
  getContent: (e) => `<div>更新的内容：${e.target.id}</div>`,
});

:::warning{title=注意} 使用 updatePlugin 方法时，需要在初始化时为插件指定唯一的 key。 :::

卸载插件

使用 setPlugins 方法同样可以卸载插件，将插件配置列表置为空即可：

// 卸载所有插件
graph.setPlugins([]);

调用插件方法

一些插件提供了可供用户调用的 API 方法，例如 history 插件提供了 undo 和 redo 方法，用户可以通过调用这些方法来实现撤销和重做操作。

要调用这些方法，需要先获取到插件实例，可通过 getPluginInstance 方法获取：

// 配置插件
const graph = new Graph({
  plugins: [{ type: 'history', key: 'my-history' }],
});

// 获取插件实例
const history = graph.getPluginInstance('my-history');

// 调用插件方法
history.undo();
history.redo();

:::warning{title=注意} graph.getPluginInstance 方法接收插件 key 值作为参数，因此如果需要获取插件实例，需要将对应插件配置为 object 的形式，并传入 key 值。 :::

更多与插件相关的 API 请参考 插件 API 文档。

自定义插件

当内置插件无法满足需求时，你可以：

• 继承和扩展现有插件
• 创建全新的自定义插件

自定义插件需要先注册后使用。详细教程请参考 自定义插件 文档。

import { register, ExtensionCategory } from '@antv/g6';
import { MyCustomPlugin } from './my-custom-plugin';

// 注册自定义插件
register(ExtensionCategory.PLUGIN, 'my-custom-plugin', MyCustomPlugin);

// 使用自定义插件
const graph = new Graph({
  plugins: ['my-custom-plugin'],
});

通过合理组合和配置插件，你可以构建出功能丰富、交互体验出色的图可视化应用。