當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

核心概念——节点分组 Group

發(fā)布時(shí)間：2024/5/7 编程问答 56 豆豆

生活随笔收集整理的這篇文章主要介紹了核心概念——节点分组 Group 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

title: 節(jié)點(diǎn)分組 Group
order: 9

New Feature：自 G6 3.1.2 開始支持自定義節(jié)點(diǎn)分組的標(biāo)題了，可以渲染帶有標(biāo)題的分組。

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

數(shù)據(jù)結(jié)構(gòu)

新增節(jié)點(diǎn)分組功能時(shí)，盡量保持了 G6 數(shù)據(jù)結(jié)構(gòu)的穩(wěn)定性。為了體現(xiàn)分組的特性，我們在 nodes 數(shù)據(jù)項(xiàng)中加入了 groupId 屬性，另外新增了 groups 字段，用于表示數(shù)據(jù)中所包括的分組及各分組之間的層級關(guān)系。

當(dāng) groups 中的對象包括 title 屬性字段時(shí)，表示要渲染帶有標(biāo)題的分組，title 字段的類型可以是 string 或 object：

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

{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: '第一個(gè)分組',stroke: '#444',offsetX: 0,offsetY: 0},parentId: 'p1'},{id: 'group2',parentId: 'p1'},{id: 'p1'}] }

如何渲染 group

當(dāng) nodes 中存在 groupId 屬性字段時(shí)，在渲染過程中，G6 會自動(dòng)渲染分組。當(dāng)存在 groups 屬性時(shí)，G6 會自動(dòng)判斷各分組之間的層級關(guān)系，并渲染出嵌套的分組。但當(dāng)沒有使用任何布局的時(shí)候，需要在 nodes 中指定各個(gè)節(jié)點(diǎn)的坐標(biāo)信息，即節(jié)點(diǎn)的 x 和 y 屬性值。

渲染的效果如下圖所示：

此時(shí)，不能對分組中的節(jié)點(diǎn)及分組進(jìn)行任何操作，接下來，我們介紹可以對分組進(jìn)行的各種操作。

操作分組

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

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

拖動(dòng)分組；
通過拖拽，動(dòng)態(tài)改變分組中的節(jié)點(diǎn)數(shù)量及分組大小；
將一個(gè)分組從父分組中拖拽出來，并取消分組直接的關(guān)聯(lián)關(guān)系，動(dòng)態(tài)改變父分組的大小；
雙擊分組，收起和展開分組：
- 當(dāng)收起分組后，與分組節(jié)點(diǎn)中的連線會自動(dòng)連到分組上；
- 展開分組后，恢復(fù)之前的連接和位置。
拖動(dòng)節(jié)點(diǎn)，所在的分組高亮，當(dāng)拖到其他分組時(shí)，其他分組高亮；
[暫不支持]?將分組拖入到另外個(gè)分組，并改變分組層級的所屬關(guān)系。

drag-group

drag-group?Behavior，支持拖動(dòng)分組，拖動(dòng)分組過程中，會動(dòng)態(tài)改變分組中節(jié)點(diǎn)和邊的位置，在拖拽完成以后，保持分組和節(jié)點(diǎn)的相對位置不變。

collapse-expand-group

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

優(yōu)化目前只支持雙擊交互，正式發(fā)布時(shí)，會支持用戶自定義交互方式，來實(shí)現(xiàn)分組的收起和展開。

drag-node-with-group

drag-node-with-group?Behavior? 和 drag-node? 類似，但該 Behavior 僅用于用 group 時(shí) node 的拖拽。拖拽 node 過程中，會動(dòng)態(tài)改變 node 所在的分組。

優(yōu)化目前暫不支持將多個(gè)節(jié)點(diǎn)拖出拖入到分組中。

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

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

適用場景

風(fēng)控、反洗錢、保險(xiǎn)騙保、網(wǎng)絡(luò)詐騙、信用卡詐騙等場景下團(tuán)伙分析；

特征分析：同一個(gè)分組中的節(jié)點(diǎn)在某些特征上面比較相似；

整理節(jié)點(diǎn)：當(dāng)類似的節(jié)點(diǎn)放到一個(gè)分組中，只渲染分組，不渲染節(jié)點(diǎn)，減少干擾元素。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：高级指引——手动创建节点分组 Group
下一篇： 120. Triangle 三角形最小路