组合总览

阅读时间约 2 分钟

组合(Combo) 全称为 Combination,是 G6 中的一种特殊的元素,它可以包含节点和子组合。它通常用于表示集合关系,例如一个部门包含多个员工,一个城市包含多个区域等。

注意

不建议在树图中使用组合,因为组合的布局方式和树图的布局方式不匹配,可能会导致样式混乱。

G6 提供了以下内置组合:

  • Circle 圆形组合
  • Rect 矩形组合

你可以通过配置 type 来使用:

// 在数据中指定组合类型
const data = {
combos: [{ id: 'combo-1', type: 'circle' }],
};
// 在组合配置中指定组合类型
{
combo: {
type: 'circle',
}
}

组合构成

G6 中提供的组合由以下几部分构成:

  • key :组合的主图形,表示组合的主要形状;
  • halo :主图形周围展示的光晕效果的图形;
  • label :文本标签,通常用于展示组合的名称或描述;

注册组合

组合的注册方式和节点类似:

import { register, ExtensionCategory } from '@antv/g6';
import { CustomCombo } from 'package-name/or/path-to-your-custom-combo';
register(ExtensionCategory.COMBO, 'custom-combo', CustomCombo);

配置组合

你可以通过以下方式配置组合类型及其样式:

  1. 在数据中配置:
{
"combos": [
{
"id": "combo-1",
"type": "custom-combo",
"style": {
// 组合样式
}
}
]
}
  1. 在组合样式映射中配置:
{
combo: {
type: 'custom-combo',
style: {
// 组合样式
}
}
}

自定义组合

如果内置组合元素无法满足需求,可以自定义组合元素,具体请参考自定义组合

上一篇
自定义边
下一篇
组合配置项