---

title: 手動創建節點分組 Group
order: 8

節點分組在默認情況下是根據數據自動渲染的，當數據中存在 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');

總結

以上是生活随笔為你收集整理的高级指引——手动创建节点分组 Group的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。