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

G6 提供了 9 種內置邊：

• line：直線，不支持控制點；
• polyline：折線，支持多個控制點；
• arc：圓弧線；
• quadratic：二階貝塞爾曲線；
• cubic：三階貝塞爾曲線；
• cubic-vertical：垂直方向的三階貝塞爾曲線，不考慮用戶從外部傳入的控制點；
• cubic-horizontal：水平方向的三階貝塞爾曲線，不考慮用戶從外部傳入的控制點；
• loop：自環。

這些內置邊的默認樣式分別如下圖所示。

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

內置邊類型說明

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

名稱	描述
line	連接兩個節點的直線： - controlPoints 不生效 - 更多配置詳見 line 邊的配置
polyline	多段線段構成的折線，連接兩個端點： - controlPoints 表示所有線段的拐點，不指定時根據 A* 算法自動生成折線 - 更多配置詳見 polyline 邊的配置
arc	連接兩個節點的一段圓弧： - controlPoints 不生效 - 使用 curveOffset 指定弧的彎曲程度，其正負影響弧彎曲的方向 - 更多配置詳見 arc 邊的配置
quadratic	只有一個控制點的曲線： - controlPoints 不指定時，會默認線的一半處彎曲 - 更多配置詳見 quadratic 邊的配置
cubic	有兩個控制點的曲線： - controlPoints 不指定時，會默認線的 1/3, 2/3 處彎曲 - 更多配置詳見 cubic 邊的配置
cubic-vertical	垂直方向的三階貝塞爾曲線，不考慮用戶從外部傳入的控制點
cubic-horizontal	水平方向的三階貝塞爾曲線，不考慮用戶從外部傳入的控制點
loop	自環。更多配置詳見 loop 邊的配置

邊的通用屬性

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

名稱	是否必須	類型	備註
id	false	String	邊唯一 ID，必須是唯一的 string
source	true	String	Number
target	true	String	結束點 id
type	false	String	指定邊的類型，可以是內置邊的類型名稱，也可以是自定義邊的名稱。默認爲 'line'
sourceAnchor	false	Number	邊的起始節點上的錨點的索引值
targetAnchor	false	Number	邊的終止節點上的錨點的索引值
style	false	Object	邊的樣式屬性
label	false	String	文本文字，如果沒有則不會顯示
labelCfg	false	Object	文本配置項

樣式屬性 style

Object 類型。通過 style 配置來修改邊的顏色、線寬等屬性。下表是 style 對象中常用的配置項：

名稱	是否必須	類型	備註
stroke	false	String	邊的顏色
lineWidth	false	Number	邊寬度
lineAppendWidth	false	Number	邊響應鼠標事件時的檢測寬度，當 lineWidth 太小而不易選中時，可以通過該參數提升擊中範圍
endArrow	false	Boolean / Object	爲 true 時在邊的結束端繪製默認箭頭，爲 false 時不繪製結束端箭頭；也可以使用內置箭頭配置，例如： endArrow: { path: G6.arrow.vee(10, 20, 10), // 內置箭頭，參數爲箭頭寬度、長度、偏移量 d（默認爲 0） d: 10 // 偏移量 } ；或通過 path 自定義的箭頭，例如： endArrow: { path: 'M 0,0 L 20,10 L 20,-10 Z', // 自定義箭頭路徑 d: -2 // 偏移量 }
startArrow	false	Boolean / Object	爲 true 時在邊的開始端繪製默認箭頭，爲 false 時不繪製結束端箭頭；也可以使用內置箭頭配置，例如： startArrow: { path: G6.arrow.vee(10, 20, 10), // 內置箭頭，參數爲箭頭寬度、長度、偏移量 d（默認爲 0） d: 10 // 偏移量 } ；或通過 path 自定義的箭頭，例如： startArrow: { path: 'M 0,0 L 20,10 L 20,-10 Z', // 自定義箭頭路徑 d: -2 // 偏移量 }
strokeOpacity	false	Number	邊透明度
shadowColor	false	String	陰影顏色
shadowBlur	false	Number	陰影模糊程度
shadowOffsetX	false	Number	陰影 x 方向偏移量
shadowOffsetY	false	Number	陰影 y 方向偏移量
lineDash	false	Array	設置線的虛線樣式，可以指定一個數組。一組描述交替繪製線段和間距（座標空間單位）長度的數字。 如果數組元素的數量是奇數， 數組的元素會被複制並重復。例如， [5, 15, 25] 會變成 [5, 15, 25, 5, 15, 25]。
cursor	false	String	鼠標在該邊上時的鼠標樣式，CSS 的 cursor 選項都支持

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

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

標籤文本 label 及其配置 labelCfg

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

名稱	是否必須	類型	備註
refX	false	Number	標籤在 x 方向的偏移量
refY	false	Number	標籤在 y 方向的偏移量
position	false	String	文本相對於邊的位置，目前支持的位置有：'start'，'middle'，'end'。默認爲'middle'。
autoRotate	false	Boolean	標籤文字是否跟隨邊旋轉，默認 false
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,
  defaultEdge: {
    // ... 其他屬性
    label: 'edge-label',
    labelCfg: {
      refY: -10,
      refX: 60,
    },
  },
});

邊的配置方法

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

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

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

實例化圖時全局配置

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

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

在數據中動態配置

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

const data = {
  nodes: [
    ... // 節點
  ],
  edges: [{
    source: 'node0',
    target: 'node1'
    type: 'polyline',
    ... // 其他配置
    style: {
      ...  // 樣式屬性，每種邊的詳細樣式屬性參見各邊文檔
    }
  },{
    source: 'node1',
    target: 'node2'
    type: 'cubic',
    ... // 其他配置
    style: {
      ...  // 樣式屬性，每種邊的詳細樣式屬性參見各邊文檔
    }
  },
    ... // 其他邊
  ]
}

使用 graph.edge()

該方法可以爲不同邊進行不同的配置。
提示：

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

// const data = ...
// const graph = ...
graph.edge(edge => {
  return {
    id: edge.id,
    type: 'polyline',
    style: {
      fill: 'steelblue',
    },
  };
});

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

實例演示

const data = {
  nodes: [
    { id: '1', x: 50, y: 50, size: 20 },
    { id: '2', x: 150, y: 50, size: 20 },
    { id: '3', x: 200, y: 50, size: 20 },
    { id: '4', x: 300, y: 130, size: 20 },
    { id: '5', x: 350, y: 50, size: 20 },
    { id: '6', x: 450, y: 50, size: 20 },
    { id: '7', x: 500, y: 50, size: 20 },
    { id: '8', x: 600, y: 50, size: 20 },
    { id: '9', x: 650, y: 50, size: 20 },
    { id: '10', x: 750, y: 50, size: 20 },
    { id: '11', x: 800, y: 50, size: 20 },
    { id: '12', x: 900, y: 150, size: 20 },
    { id: '13', x: 950, y: 50, size: 20 },
    { id: '14', x: 1050, y: 150, size: 20 },
    { id: '15', x: 1100, y: 50, size: 20 },
  ],
  edges: [
    { source: '1', target: '2', type: 'line', label: 'line' },
    { source: '3', target: '4', type: 'polyline', label: 'polyline' },
    { source: '5', target: '6', type: 'arc', label: 'arc' },
    { source: '7', target: '8', type: 'quadratic', label: 'quadratic' },
    { source: '9', target: '10', type: 'cubic', label: 'cubic' },
    { source: '11', target: '12', type: 'cubic-vertical', label: 'cubic-vertical' },
    { source: '13', target: '14', type: 'cubic-horizontal', label: 'cubic-horizontal' },
    { source: '15', target: '15', type: 'loop', label: 'loop' },
  ],
};

const graph = new G6.Graph({
container: ‘mountNode’,
width: 1500,
height: 300,
linkCenter: true, // 使邊連入節點的中心
});
graph.data(data);
graph.render();

顯示結果：

調整邊的樣式

可以在邊上添加文本，修改邊的樣式。下面演示將配置寫入數據的方式配置邊。使用下面代碼替換上面代碼中的 9-10、11-12 兩條邊數據，修改這兩條邊的樣式和其文本。

// 使 9-10 的 cubic 邊文本下移 15 像素
{
  source: '9',
  target: '10',
  type: 'cubic',
  label: 'cubic',
  labelCfg: {
    refY: -15 // refY 默認是順時針方向向下，所以需要設置負值
  }
},
// 設置 11-12 的 cubic-vertical 邊的顏色、虛線、粗細，並設置文本樣式、隨邊旋轉
{
  source: '11',
  target: '12',
  type: 'cubic-vertical',
  color: '#722ed1',     // 邊顏色
  size: 5,              // 邊粗細
  style: {
  	lineDash: [2, 2]    // 虛線邊
  },
  label: 'cubic-vertical',
  labelCfg: {
  	position: 'center', // 其實默認就是 center，這裏寫出來便於理解
    autoRotate: true,   // 使文本隨邊旋轉
    style: {
      stroke: 'white',  // 給文本添加白邊和白色背景
    	lineWidth: 5,     // 文本白邊粗細
      fill: '#722ed1',  // 文本顏色
    }
  }
}

相關閱讀

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