Extension - 扩展

概念

扩展 (Extension) 是 G6 中的一个重要概念，它是 G6 中所有可扩展部分的统称，包括以下几种：

• 动画 (Animation)
• 交互 (Behavior)
• 元素 (Element)
• 节点 (Node)
  • 边 (Edge)
  • 组合 (Combo)
• 布局 (Layout)
• 色板 (Palette)
• 插件 (Plugin)
• 主题 (Theme)
• 数据转换 (Transform)

注册扩展

G6 提供了 register 函数用于注册扩展，例如：

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

// 注册节点
register(ExtensionCategory.NODE, 'custom-node', CustomNode);

register 函数的第一个参数是扩展的类型，第二个参数是扩展的名称，第三个参数是扩展的实现(扩展实现参考各扩展类型所在文档的自定义相关章节)。

不同的扩展类型之间可以使用相同的扩展名称，但同一类型的扩展重复注册时仅会在第一次注册时生效。

// ✅
register(ExtensionCategory.NODE, 'custom-name', CustomNode);
register(ExtensionCategory.COMBO, 'custom-name', CustomCombo);

// ❌
register(ExtensionCategory.NODE, 'custom-name', CustomNode);
register(ExtensionCategory.NODE, 'custom-name', CustomNode);

使用扩展

不同的扩展类型的配置位置有所不同，但都是通过指定注册时所使用的名称来使用扩展，例如：

• 使用节点扩展：options.node.type
• 使用边扩展：options.edge.type
• 使用组合扩展：options.combo.type
• 使用交互扩展：options.behaviors
• 使用布局扩展：options.layout.type
• 使用插件扩展：options.plugins
• 使用主题扩展：options.theme
• 使用数据转换扩展：options.transform
• 使用色板扩展：options.node.palette options.edge.palette 等
• 使用动画扩展：options.node.animate options.edge.animate 等

获取扩展

G6 提供了 getExtension 和 getExtensions 方法分别用于获取指定扩展类型下的单个扩展和所有扩展，例如：

import { getExtension, getExtensions, ExtensionCategory } from '@antv/g6';

// 获取注册的名称为 'custom-node' 的节点扩展实现
getExtension(ExtensionCategory.NODE, 'custom-node');

// 获取所有注册的节点扩展实现
getExtensions(ExtensionCategory.NODE);