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,支持circlerect两种。


groupType指定为circle的效果如下。

group2.gif

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

3.gif


groupStyle

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


通用属性

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


default

属性名称

含义

类型

备注

minDis

距离右上角最小距离

number

不存在嵌套分组时使用该值

maxDis

距离右上角最大距离

number

存在嵌套分组时使用该值


collapse

属性名称

含义

类型

备注

r

分组的半径

number

当groupType为circle时有效

width

分组宽度

number

当groupType为rect时有效

height

分组高度

number

当groupType为rect时有效


add / addItem

用于生成分组。

参数

含义

类型

备注

groupId

分组ID

string


nodes

分组中包含的节点或节点ID

array

节点实例或节点ID

type

分组类型

string

默认circle,支持circle和rect

zIndex

分组层级

number

默认0

const nodes = ['node1', 'node2']
graph.addItem('group', {
  groupId: 'xxxx000999',
  nodes,
  type: 'rect',
  zIndex: 2
})


collapseGroup

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

参数

含义

类型

备注

groupId

分组ID

string


graph.collapseGroup('groupId')

expandGroup

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

参数

含义

类型

备注

groupId

分组ID

string


graph.expandGroup('groupId')