G6 圖可視化引擎——核心概念——節點/邊/Combo——內置節點——內置節點總覽

G6 的內置節點包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect。這些內置節點的默認樣式分別如下圖所示。

本文將概述 G6 中的各個內置節點類型、內置節點的通用屬性、配置方法。

內置節點類型說明

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

名稱	描述	默認示例
circle	圓形： - size 是單個數字，表示直徑 - 圓心位置對應節點的位置 - color 字段默認在描邊上生效 - 標籤文本默認在節點中央 - 更多字段見 Circle 節點教程
rect	矩形： - size 是數組，例如：[100, 50] - 矩形的中心位置是節點的位置，而不是左上角 - color 字段默認在描邊上生效 - 標籤文本默認在節點中央 - 更多字段見 Rect 節點教程
ellipse	橢圓： - size 是數組，表示橢圓的長軸直徑和短軸直徑 - 橢圓的圓心是節點的位置 - color 字段默認在描邊上生效 - 標籤文本默認在節點中央 - 更多字段見 Ellipse 節點教程
diamond	菱形： - size 是數組，表示菱形的寬和高 - 菱形的中心位置是節點的位置 - color 字段默認在描邊上生效 - 標籤文本默認在節點中央 - 更多字段見 Diamond 節點教程
triangle	三角形： - size 是數組，表示三角形的底和高 - 三角形的中心位置是節點的位置 - color 字段默認在描邊上生效 - 標籤文本默認在節點下方 - 更多字段見 Triangle 節點教程
star	星形： - size 是單個數字，表示星形的大小 - 星星的中心位置是節點的位置 - color 字段默認在描邊上生效 - 標籤文本默認在節點中央 - 更多字段見 Star 節點教程
image	圖片： - size 是數組，表示圖片的寬和高 - 圖片的中心位置是節點位置 - img 圖片的路徑，也可以在 style 裏面設置 - color 字段不生效 - 標籤文本默認在節點下方 - 更多字段見 Image 節點教程
modelRect	卡片： - size 是數組，表示卡片的寬和高 - 卡片的中心位置是節點的位置 - color 字段默認在描邊上生效 - 標籤文本默認在節點中央 - 若有  description 字段則顯示在標籤文本下方顯示  description 內容 - 更多字段見 ModelRect 節點教程

節點的通用屬性

所有內置的節點支持的通用屬性：

名稱	是否必須	類型	備註
id	true	String	節點唯一 ID，必須是唯一的 string
x	false	Number	x 座標
y	false	Number	y 座標
type	false	String	指定節點類型，內置節點類型名稱或自定義節點的名稱。默認爲 'circle'
size	false	Number / Array	節點的大小
anchorPoints	false	Array	指定邊連入節點的連接點的位置（相對於該節點而言），可以爲空。例如: [0, 0]，代表節點左上角的錨點，[1, 1],代表節點右下角的錨點
style	false	Object	節點的樣式屬性。
label	false	String	文本文字
labelCfg	false	Object	文本配置項

樣式屬性 style

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

名稱	是否必須	類型	備註
fill	false	String	節點填充色
stroke	false	String	節點的描邊顏色
lineWidth	false	Number	描邊寬度
lineDash	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	鼠標在該節點上時的鼠標樣式，CSS 的 cursor 選項都支持

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

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultNode: {
    // ... 其他屬性
    style: {
      fill: '#steelblue',
      stroke: '#eaff8f',
      lineWidth: 5,
      // ... 其他屬性
    },
  },
});

標籤文本 label 及其配置 labelCfg

label String 類型。標籤文本的文字內容。

labelCfg Object 類型。配置標籤文本。下面是 labelCfg 對象中的常用配置項：

名稱	是否必須	類型	備註
position	false	String	文本相對於節點的位置，目前支持的位置有：'center'，'top'，'left'，'right'，'bottom'。默認爲 'center'。modelRect 節點不支持該屬性
offset	false	Number	文本的偏移，position 爲 'bottom' 時，文本的上方偏移量；position 爲 'left' 時，文本的右方偏移量；以此類推在其他 position 時的情況。modelRect 節點的 offset 爲左邊距
style	false	Object	標籤的樣式屬性。

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

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

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

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultNode: {
    // ... 其他屬性
    label: 'node-label',
    labelCfg: {
      position: 'bottom',
      offset: 10,
      style: {
        fill: '#666',
      },
    },
  },
});

節點的配置方法

配置節點的方式有三種：實例化圖時全局配置，在數據中動態配置，使用 graph.node(nodeFn) 函數配置。這幾種配置方法可以同時使用，優先級：使用 graph.node(nodeFn) 配置 > 數據中動態配置 > 實例化圖時全局配置。

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

實例化圖時全局配置

用戶在實例化 Graph 時候可以通過 defaultNode 配置節點，這裏的配置是全局的配置，將會在所有節點上生效。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultNode: {
    type: 'circle',
    // 其他配置
  },
});

在數據中動態配置

如果需要爲不同節點進行不同的配置，可以將配置寫入到節點數據中。這種配置方式可以通過下面代碼的形式直接寫入數據，也可以通過遍歷數據的方式寫入。

const data = {
  nodes: [{
    id: 'node0',
    size: 100,
    type: 'rect',
    ...    // 其他屬性
    style: {
      ...  // 樣式屬性，每種節點的詳細樣式屬性參見各節點文檔
    }
  },{
    id: 'node1',
    size: [50, 100],
    type: 'ellipse',
    ...    // 其他屬性
    style: {
      ...  // 樣式屬性，每種節點的詳細樣式屬性參見各節點文檔
    }
  },
    ... // 其他節點
  ],
  edges: [
    ... // 邊
  ]
}

使用 graph.node()

該方法可以爲不同節點進行不同的配置。

提示:

• 該方法必須在 render 之前調用，否則不起作用；
• 由於該方法優先級最高，將覆蓋其他地方對節點的配置，這可能將造成一些其他配置不生效的疑惑；
• 該方法在增加元素、更新元素時會被調用，如果數據量大、每個節點上需要更新的內容多時，可能會有性能問題。

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

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

示例

const data = {
  nodes: [
    {
      id: 'node_circle',
      x: 100,
      y: 100,
      type: 'circle',
      label: 'circle',
    },
    {
      id: 'node_rect',
      x: 200,
      y: 100,
      type: 'rect',
      label: 'rect',
    },
    {
      id: 'node-ellipse',
      x: 330,
      y: 100,
      type: 'ellipse',
      label: 'ellipse',
    },
    {
      id: 'node-diamond',
      x: 460,
      y: 100,
      type: 'diamond',
      label: 'diamond',
    },
    {
      id: 'node-triangle',
      x: 560,
      y: 100,
      //size: 80,
      type: 'triangle',
      label: 'triangle',
    },
    {
      id: 'node-star',
      x: 660,
      y: 100,
      //size: [60, 30],
      type: 'star',
      label: 'star',
    },
    {
      id: 'node-image',
      x: 760,
      y: 100,
      size: 50,
      type: 'image',
      img: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
      label: 'image',
    },
    {
      id: 'node-modelRect',
      x: 900,
      y: 100,
      type: 'modelRect',
      label: 'modelRect',
    },
  ],
};

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1500,
  height: 300,
});
graph.data(data);
graph.render();

顯示結果：

triangle 節點和 image 節點的標籤文本默認位置爲：position:‘bottom’ ，其他節點文本的默認位置都爲：position: ‘center’；

調整節點配置

下面演示通過將配置寫入數據的方式，調整 id 爲 ‘node-ellipse’ 的橢圓節點的文本位置，顏色和樣式。將下面代碼替換上面代碼中 id 爲 ‘node-ellipse’ 的節點數據即可生效。

{
  id: 'node-ellipse',
  x: 330,
  y: 100,
  type: 'ellipse',
  size: [60, 30],
  label: 'ellipse',
  labelCfg: {
    position: 'bottom',
    offset: 5
  },
  style: {
    fill: '#fa8c16',
    stroke: '#000',
    lineWidth: 2
  }
}

再爲 id 爲 ‘node-modelRect’ 的 modelRect 節點添加描述文字，使用下面代碼替換 id 爲 ‘node-modelRect’ 的節點數據即可得到帶有內容爲 ‘描述文本 xxxxxxxxxxx’ 的 modelRect 節點。