核心概念——節點/邊/Combo——內置Combo——內置Combo總覽

G6 的內置 Combo 包括 circle 和 rect 兩種類型，分別以下圖所示。

本文將概述 G6 中的各個內置 Combo 類型、內置 Combo 的通用屬性、配置方法。各種型 Combo 詳細配置項及配置方法見本目錄下相應文檔。

⚠️ 注意: 使用 Combo 時，必須在示例化圖時配置 groupByTypes 設置爲 false，圖中元素的視覺層級才能合理。

內置 Combo 類型說明

下面表格中顯示了內置的各種 Combo，同時對一些特殊的字段進行了說明：

名稱	描述	默認示例
circle	圓形： - size 是單個數字，表示直徑 - 圓心位置對應 Combo 的位置 - color 字段默認在描邊上生效 - 標籤文本默認在 Combo 正上方 - 更多字段見 Circle Combo 教程 - Demo
rect	矩形： - size 是數組，例如：[100, 50] - 矩形的中心位置是 COmbo 的位置，而不是左上角 - color 字段默認在描邊上生效 - 標籤文本默認在 Combo 左上角 - 更多字段見 Rect Combo 教程 - Demo

Combo 的通用屬性

全部內置的 Combo 支持的通用屬性：

屬性名	類型	是否必須	示例	說明
id	string	true	'comboA'	一個 Combo 的惟一標識，必須是 string 類型，必須惟一
type	string	false	'rect'	指定該 Combo 的類型，能夠是內置 Combo 的類型名，也能夠是自定義 Combo 的類型名。默認是 'circle'
parentId	string	false	'comboB'	該 Combo 的父 Combo 的 ID
size	false	Number / Array	30 或 [30, 20]	Combo 的最小大小，默認 'circle' 類型 Combo 的 size 爲 20，'rect' 類型的爲 [20, 5]
padding	Number / Number[]	false	10 或 [ 10, 20, 10, 20 ]	該 Combo 內邊距，默認 'circle' 類型 Combo 的 padding 爲 25，'rect' 類型的爲 [25, 20, 15, 20]
style	Object	false		該 Combo 的樣式配置項
label	string	false	'Combo A'	該 Combo 的文本標籤
labelCfg	Object	false		該 Combo 的文本標籤樣式配置項

樣式屬性 style

Object 類型。經過 style 配置來修改 Combo 的填充色、邊框顏色、陰影等屬性。下表是 style 對象中經常使用的配置項：

名稱	是否必須	類型	備註
fill	false	String	Combo 填充色
stroke	false	String	Combo 的描邊顏色
lineWidth	false	Number	描邊寬度
shadowColor	false	String	陰影顏色
shadowBlur	false	Number	陰影範圍
shadowOffsetX	false	Number	陰影 x 方向偏移量
shadowOffsetY	false	Number	陰影 y 方向偏移量
opacity	false	Number	設置繪圖的當前 alpha 或透明值
fillOpacity	false	Number	設置填充的 alpha 或透明值
cursor	false	String	鼠標在該 Combo 上時的鼠標樣式，CSS 的 cursor 選項都支持

下面代碼演示在實例化圖時全局配置方法中配置 style：

const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, // 必須將 groupByTypes 設置爲 false，帶有 combo 的圖中元素的視覺層級才能合理 groupByTypes: false, defaultCombo: { // ... 其餘屬性 style: { fill: '#steelblue', stroke: '#eaff8f', lineWidth: 5, // ... 其餘屬性 }, }, });const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, // 必須將 groupByTypes 設置爲 false，帶有 combo 的圖中元素的視覺層級才能合理 groupByTypes: false, defaultCombo: { // ... 其餘屬性 style: { fill: '#steelblue', stroke: '#eaff8f', lineWidth: 5, // ... 其餘屬性 }, }, });

標籤文本 label 及其配置 labelCfg

label String 類型。標籤文本的文字內容。
labelCfg Object 類型。配置標籤文本。下面是 labelCfg 對象中的經常使用配置項：

名稱	是否必須	類型	備註
position	false	String	文本相對於 Combo 的位置，目前支持的位置有:  'center'，'top'，'left'，'right'，'bottom'。默認爲 'top'
refX	false	Number	文本的偏移，在 x 方向上的偏移量
refY	false	Number	文本的偏移，在 y 方向上的偏移量
style	false	Object	標籤的樣式屬性。

上表中的標籤的樣式屬性 style 的經常使用配置項以下：

名稱	是否必須	類型	備註
fill	false	String	文本顏色
stroke	false	String	文本描邊顏色
lineWidth	false	Number	文本描邊粗細
opacity	false	Number	文本透明度
fontSize	false	Number	文本字體大小
fontFamily	false	Number	文字字體
... Combo 標籤與節點、邊標籤樣式屬性相同，統一整理在 Text 圖形 API

下面代碼演示在實例化圖時全局配置方法中配置  label 和  labelCfg。

const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, // 必須將 groupByTypes 設置爲 false，帶有 combo 的圖中元素的視覺層級才能合理 groupByTypes: false, defaultCombo: { // ... 其餘屬性 labelCfg: { position: 'top', offset: [10, 10, 10, 10], style: { fill: '#666', }, }, }, });const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, // 必須將 groupByTypes 設置爲 false，帶有 combo 的圖中元素的視覺層級才能合理 groupByTypes: false, defaultCombo: { // ... 其餘屬性 labelCfg: { position: 'top', offset: [10, 10, 10, 10], style: { fill: '#666', }, }, }, });

Combo 的配置方法

配置 Combo 的方式有三種：實例化圖時全局配置，在數據中動態配置，使用 graph.combo(comboFn) 函數配置。這幾種配置方法能夠同時使用，優先級：

使用 graph.combo(comboFn) 配置 > 數據中動態配置 > 實例化圖時全局配置

即有相同的配置項時，優先級高的方式將會覆蓋優先級低的。

實例化圖時全局配置

用戶在實例化 Graph 時候能夠經過 defaultCombo 配置 Combo ，這裏的配置是全局的配置，將會在全部 Combo 上生效。

const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, // 必須將 groupByTypes 設置爲 false，帶有 combo 的圖中元素的視覺層級才能合理 groupByTypes: false, defaultCombo: { type: 'circle', // 其餘配置 }, });const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, // 必須將 groupByTypes 設置爲 false，帶有 combo 的圖中元素的視覺層級才能合理 groupByTypes: false, defaultCombo: { type: 'circle', // 其餘配置 }, });

在數據中動態配置

若是須要爲不一樣 Combo 進行不一樣的配置，能夠將配置寫入到 Combo 數據中。這種配置方式能夠經過下面代碼的形式直接寫入數據，也能夠經過遍歷數據的方式寫入。

const data = { nodes: [ ... // 節點 ], edges: [ ... // 邊 ], combos: [{ id: 'combo0', size: 100, type: 'circle', ... // 其餘屬性 style: { ... // 樣式屬性，每種 Combo 的詳細樣式屬性參見各種型 Combo 文檔 } },{ id: 'combo1', size: [50, 100], type: 'rect', ... // 其餘屬性 style: { ... // 樣式屬性，每種 Combo 的詳細樣式屬性參見各種型 Combo 文檔 } }, // 其餘 combo ] }const data = { nodes: [ ... // 節點 ], edges: [ ... // 邊 ], combos: [{ id: 'combo0', size: 100, type: 'circle', ... // 其餘屬性 style: { ... // 樣式屬性，每種 Combo 的詳細樣式屬性參見各種型 Combo 文檔 } },{ id: 'combo1', size: [50, 100], type: 'rect', ... // 其餘屬性 style: { ... // 樣式屬性，每種 Combo 的詳細樣式屬性參見各種型 Combo 文檔 } }, // 其餘 combo ] }

使用 graph.combos()

該方法能夠爲不一樣 combo 進行不一樣的配置。

提示:

• 該方法必須在 render 以前調用，不然不起做用；
• 因爲該方法優先級最高，將覆蓋其餘地方對 combo 的配置，這可能將形成一些其餘配置不生效的疑惑；
• 該方法在增長元素、更新元素時會被調用，若是數據量大、每一個 Combo 上須要更新的內容多時，可能會有性能問題。

// const data = ... // const graph = ... graph.combo(combo => { return { id: combo.id, type: 'rect', style: { fill: 'blue', }, }; }); // const data = ... // const graph = ... graph.combo(combo => { return { id: combo.id, type: 'rect', style: { fill: 'blue', }, }; });

graph.data(data);
graph.render();

示例

const data = { nodes: [{ id: 'node1', label: 'Node1', comboId: 'rect_combo' }, { id: 'node2', label: 'Node 2' }], combos: [ { id: 'circle_combo', type: 'circle', label: 'Circle', }, { id: 'rect_combo', type: 'rect', label: 'Rect', }, ], }; const data = { nodes: [{ id: 'node1', label: 'Node1', comboId: 'rect_combo' }, { id: 'node2', label: 'Node 2' }], combos: [ { id: 'circle_combo', type: 'circle', label: 'Circle', }, { id: 'rect_combo', type: 'rect', label: 'Rect', }, ], };

const graph = new G6.Graph({
container: ‘mountNode’,
width: 1500,
height: 300,
// 必須將 groupByTypes 設置爲 false，帶有 combo 的圖中元素的視覺層級才能合理
groupByTypes: false,
});
graph.data(data);
graph.render();

顯示結果：

調整 Combo 配置

下面演示經過將配置寫入數據的方式，調整 id 爲 'rect_combo' 的文本位置、顏色、樣式。將下面代碼替換上面代碼中 id 爲  'rect_combo' 的 combo 數據便可生效。

{ id: 'rect_combo', type: 'rect', label: 'Rect Combo', labelCfg: { position: 'bottom', refX: 5, refY: -12, style: { fill: '#fff' } }, style: { fill: '#fa8c16', stroke: '#000', lineWidth: 2 } }{ id: 'rect_combo', type: 'rect', label: 'Rect Combo', labelCfg: { position: 'bottom', refX: 5, refY: -12, style: { fill: '#fff' } }, style: { fill: '#fa8c16', stroke: '#000', lineWidth: 2 } }

相關閱讀

• 狀態 State —— 交互過程當中的樣式變化。