核心概念——節點/邊/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,
      // ... 其他屬性
    },
  },
});

標籤文本 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',
      },
    },
  },
});

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',
    // 其他配置
  },
});

在數據中動態配置

如果需要爲不同 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',
    },
  };
});

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 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
  }
}

相關閱讀

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