组合总览

阅读时间约 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);

配置组合

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

在数据中配置：

{
  "combos": [
    {
      "id": "combo-1",
      "type": "custom-combo",
      "style": {
        // 组合样式
      }
    }
  ]
}

在组合样式映射中配置：

{
  combo: {
    type: 'custom-combo',
    style: {
      // 组合样式
    }
  }
}

自定义组合

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

自定义边

组合配置项