节点分组在默认情况下是根据数据自动渲染的，当数据中存在 groups 时根据 groups 字段渲染分组，当不存在 groups 时，则根据 nodes 数据中是否存在 groupId 来渲染分组。当数据中即不存在 groups，节点数据中也不存在 groupId 时，将不会渲染节点分组。

CustomGroup 为节点分组，支持 Circle 和 Rect 两种类型。用户可通过 CustomGroup 创建节点分组、设置分组的样式、计算分组的坐标及宽高、收起和展开分组。

当需要通过手动创建分组时候，可以参考下面的文档。

CustomGroup 实例化

CustomGroup 实例会在实例化 Graph 的过程中自动创建，不需要用户手动实例化。

配置项

在实例化 Graph 的时候，通过配置 groupType 和 groupStyle 来指定分组的类型及样式。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500,
  groupType: 'circle',
  groupStyle: {
    default: {},
    hover: {},
    collapse: {},
  },
});

groupType

groupType 属性用于指定分组的类型，默认为 'circle'，支持 'circle' 和 'rect'两种。

groupType 指定为 'circle' 时的效果如下。

groupType 指定为 'rect' 时的效果如下图。

groupStyle

groupStyle 用于指定分组在默认（default）、交互过程中（hover）及收起（collapse）状态下的样式。

通用属性

default、hover 和 collapse 支持的所有通用的属性参考图形属性。除过这些通用的属性，default 和 collapse 分别还支持以下特有属性。

default

groupType 指定为 'circle' 时的 minDis 与 maxDis 示意图。其中 group1 为无嵌套的 Group（即最内层的 Group），group2 为嵌套 Group。

groupType 指定为 'rect' 时的 minDis 与 maxDis 示意图。其中 group1 为无嵌套的 Group（即最内层的 Group），group2 为嵌套 Group。

collapse

add / addItem

用于生成分组。

const nodes = ['node1', 'node2'];
graph.addItem('group', {
  groupId: 'xxxx000999',
  nodes,
  type: 'rect',
  zIndex: 2,
  title: '分组标题',
  title: {
    text: '分组标题',
    stroke: '',
    fill: '',
    offsetX: 10,
    offsetY: 0,
  },
});

collapseGroup

收起分组，收起分组后，隐藏分组中的所有节点和边，分组外部与分组内节点有连线的则临时连接到分组上面。

graph.collapseGroup('groupId');

expandGroup

展开分组，显示分组中的所有节点和边，恢复收起前的连接情况。

graph.expandGroup('groupId');