手动创建节点分组 Group

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

分组默认是根据数据自动渲染的，当数据中存在 groups 时根据 groups 字段渲染分组，当不存在 groups 时，则根据 nodes 数据中是否存在 groupId 来渲染分组。

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

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

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');