---

title: 節點分組 Group
order: 9

New Feature：自 G6 3.1.2 開始支持自定義節點分組的標題了，可以渲染帶有標題的分組。

對于熟悉圖可視化類庫的用戶來說，節點分組可能是比較實用的一個功能。自 G6 3.0.5 版本開始，G6 加入了節點分組的功能，詳情參考 Demo。

數據結構

新增節點分組功能時，盡量保持了 G6 數據結構的穩定性。為了體現分組的特性，我們在 nodes 數據項中加入了 groupId 屬性，另外新增了 groups 字段，用于表示數據中所包括的分組及各分組之間的層級關系。

當 groups 中的對象包括 title 屬性字段時，表示要渲染帶有標題的分組，title 字段的類型可以是 string 或 object：

• title：類型為 string 時，值表示標題名稱，不能設置任何樣式，也不能調整標題位置；
• title 為 object 時，可以設置標題的樣式及位置，title 中各字段含義：
  • text：必選，分組的標題，類型為 string；
  • offsetX：可選，默認為 0，表示 x 方向上的偏移量；
  • offsetY：可選，默認為 0，表示 y 方向上的偏移量；
  • stroke：字體邊框顏色，同時也支持 fill、fontSize 等所有的 節點上的文本樣式屬性。

{nodes: [{id: 'node1',label: 'node1',groupId: 'group1',x: 100,y: 100},{id: 'node2',label: 'node2',groupId: 'group1',x: 150,y: 100},{id: 'node3',label: 'node3',groupId: 'group2',x: 300,y: 100},],edges: [{source: 'node1',target: 'node2'}],groups: [{id: 'group1',title: {text: '第一個分組',stroke: '#444',offsetX: 0,offsetY: 0},parentId: 'p1'},{id: 'group2',parentId: 'p1'},{id: 'p1'}] }

如何渲染 group

當 nodes 中存在 groupId 屬性字段時，在渲染過程中，G6 會自動渲染分組。當存在 groups 屬性時，G6 會自動判斷各分組之間的層級關系，并渲染出嵌套的分組。但當沒有使用任何布局的時候，需要在 nodes 中指定各個節點的坐標信息，即節點的 x 和 y 屬性值。

const data = {nodes: [{id: 'node6',groupId: 'group3',label: 'rect',x: 100,y: 300,},{id: 'node1',label: 'fck',groupId: 'group1',x: 100,y: 100,},{id: 'node9',label: 'noGroup1',groupId: 'p1',x: 300,y: 210,},{id: 'node2',label: 'node2',groupId: 'group1',x: 150,y: 200,},{id: 'node3',label: 'node3',groupId: 'group2',x: 300,y: 100,},{id: 'node7',groupId: 'p1',label: 'node7-p1',x: 200,y: 200,},{id: 'node10',label: 'noGroup',groupId: 'p2',x: 300,y: 210,},],edges: [{source: 'node1',target: 'node2',},{source: 'node2',target: 'node3',},],groups: [{id: 'group1',title: {text: '第一個分組',stroke: '#444',offsetX: -30,offsetY: 30,},parentId: 'p1',},{id: 'group2',parentId: 'p1',},{id: 'group3',parentId: 'p2',},{id: 'p1',},{id: 'p2',},], };const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,modes: {default: ['drag-canvas'],},defaultEdge: {color: '#bae7ff',}, });graph.data(data); graph.render();

渲染的效果如下圖所示：

此時，不能對分組中的節點及分組進行任何操作，接下來，我們介紹可以對分組進行的各種操作。

操作分組

只是簡單地將分組渲染出來，并沒有多大的實用價值，只有支持一系列的交互操作后，才能最大程度地體現分組的價值。

在 G6 中，我們內置了 drag-group、collapse-expand-group 及 ??drag-node-with-group? 三個 Behavior，共支持以下的交互行為：

• 拖動分組；
• 通過拖拽，動態改變分組中的節點數量及分組大小；
• 將一個分組從父分組中拖拽出來，并取消分組直接的關聯關系，動態改變父分組的大小；
• 雙擊分組，收起和展開分組：
  • 當收起分組后，與分組節點中的連線會自動連到分組上；
  • 展開分組后，恢復之前的連接和位置。
• 拖動節點，所在的分組高亮，當拖到其他分組時，其他分組高亮；
• [暫不支持]?將分組拖入到另外個分組，并改變分組層級的所屬關系。

drag-group

drag-group?Behavior，支持拖動分組，拖動分組過程中，會動態改變分組中節點和邊的位置，在拖拽完成以后，保持分組和節點的相對位置不變。

collapse-expand-group

collapse-expand-group?Behavior，支持雙擊分組收起和展開分組，收起分組以后，隱藏分組中的所有節點，外部節點和分組中節點有連線的情況下，所有連接會連接到分組上面。

優化目前只支持雙擊交互，正式發布時，會支持用戶自定義交互方式，來實現分組的收起和展開。

drag-node-with-group

drag-node-with-group?Behavior? 和 drag-node? 類似，但該 Behavior 僅用于用 group 時 node 的拖拽。拖拽 node 過程中，會動態改變 node 所在的分組。

優化目前暫不支持將多個節點拖出拖入到分組中。

const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,modes: {default: ['drag-group', 'collapse-expand-group', 'drag-node-with-group'],},defaultNode: {type: 'circleNode',},defaultEdge: {color: '#bae7ff',}, });

將這三個內置提供的 Behavior 加入到 modes 中以后的效果如下圖所示。

適用場景

風控、反洗錢、保險騙保、網絡詐騙、信用卡詐騙等場景下團伙分析；

特征分析：同一個分組中的節點在某些特征上面比較相似；

整理節點：當類似的節點放到一個分組中，只渲染分組，不渲染節點，減少干擾元素。

總結

以上是生活随笔為你收集整理的核心概念——节点分组 Group的全部內容，希望文章能夠幫你解決所遇到的問題。

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