手动创建节点分组 Group
节点分组在默认情况下是根据数据自动渲染的,当数据中存在 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
属性名称 | 含义 | 类型 | 备注 |
---|---|---|---|
minDis | 最内层(无嵌套)的 Group 的 padding | Number | 无嵌套,即该 Group 内不含有其他 Group |
maxDis | 内嵌有其他节点分组的 Group 的 padding | Number | 嵌套 Group,即该 Group 内有其他 Group 时使用该值 |
groupType
指定为 'circle'
时的 minDis
与 maxDis
示意图。其中 group1 为无嵌套的 Group(即最内层的 Group),group2 为嵌套 Group。
groupType
指定为 'rect'
时的 minDis
与 maxDis
示意图。其中 group1 为无嵌套的 Group(即最内层的 Group),group2 为嵌套 Group。
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 |
title | 分组标题配置 | Object / String | 为 String 类型时,不能配置其他属性,为 Object 时的配置参考这里 |
const nodes = ['node1', 'node2'];
graph.addItem('group', {
groupId: 'xxxx000999',
nodes,
type: 'rect',
zIndex: 2,
title: '分组标题',
title: {
text: '分组标题',
stroke: '',
fill: '',
offsetX: 10,
offsetY: 0,
},
});
collapseGroup
收起分组,收起分组后,隐藏分组中的所有节点和边,分组外部与分组内节点有连线的则临时连接到分组上面。
参数 | 含义 | 类型 | 备注 |
---|---|---|---|
groupId | 分组 ID | String |
graph.collapseGroup('groupId');
expandGroup
展开分组,显示分组中的所有节点和边,恢复收起前的连接情况。
参数 | 含义 | 类型 | 备注 |
---|---|---|---|
groupId | 分组 ID | String |
graph.expandGroup('groupId');