---

title: Triangle
order: 5

Triangle

G6 內(nèi)置了三角形 ?Triangle 節(jié)點(diǎn)，其默認(rèn)樣式如下。標(biāo)簽文本位于三角形下方。

使用方法

如 內(nèi)置節(jié)點(diǎn) 一節(jié)所示，配置節(jié)點(diǎn)的方式有兩種：實(shí)例化圖時(shí)全局配置，在數(shù)據(jù)中動(dòng)態(tài)配置。

1 實(shí)例化圖時(shí)全局配置

用戶在實(shí)例化 Graph 時(shí)候可以通過 defaultNode 指定 type 為 'triangle'，即可使用 triangle 節(jié)點(diǎn)。

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

2 在數(shù)據(jù)中動(dòng)態(tài)配置

如果需要使不同節(jié)點(diǎn)有不同的配置，可以將配置寫入到節(jié)點(diǎn)數(shù)據(jù)中。這種配置方式可以通過下面代碼的形式直接寫入數(shù)據(jù)，也可以通過遍歷數(shù)據(jù)的方式寫入。

const data = {nodes: [{id: 'node0',type: 'triangle',... // 其他配置},... // 其他節(jié)點(diǎn)],edges: [... // 邊] }

配置項(xiàng)說明

triangle 節(jié)點(diǎn)支持 節(jié)點(diǎn)通用配置，下表對(duì)部分屬性進(jìn)行解釋：

名稱含義類型備注

size	三角形的邊長(zhǎng)	Number	Array
direction	三角形的方向	String	可取值：'up'，'down'，'left'，'right'。默認(rèn)為 'up'
style	三角形默認(rèn)樣式	Object	Canvas 支持的屬性
label	標(biāo)簽文本內(nèi)容	String
labelCfg	標(biāo)簽文本配置項(xiàng)	Object
stateStyles	各狀態(tài)下的樣式	Object	詳見配置狀態(tài)樣式
linkPoints	視覺上的三個(gè)錨點(diǎn)	Object	默認(rèn)不顯示，應(yīng)與 anchorPoints 配合使用。二者區(qū)別請(qǐng)看 linkPoints
icon	三角形上 icon 配置	Object	默認(rèn)不顯示 icon

三角形方向 direction

String 類型。可取值有：'``up'、'down'、'left'、'right'。默認(rèn)為 ?'``up'。通過設(shè)置 direction，可以修改三角形的方向。下面代碼演示在實(shí)例化圖時(shí)全局配置方法中配置 direction。

const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,defaultNode: {type: 'triangle',direction: 'down',}, });

上圖分別是將 direction 配置為 'up'，'down'，'left'，'right' 的結(jié)果

樣式屬性 style

Object 類型。支持 節(jié)點(diǎn)通用樣式。通過 style 配置來修改節(jié)點(diǎn)的填充色、描邊等屬性。下面代碼演示在實(shí)例化圖時(shí)全局配置方法中配置 style，使之達(dá)到如下圖效果。

const data = {nodes: [{x: 100,y: 100,type: 'triangle',label: 'triangle',},], }; const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,defaultNode: {// type: 'triangle', // 在數(shù)據(jù)中已經(jīng)指定 type，這里無需再次指定direction: 'up',size: 100,style: {fill: '#bae637',stroke: '#eaff8f',lineWidth: 5,},}, }); graph.data(data); graph.render();

標(biāo)簽文本配置 labelCfg

Object 類型。通過 labelCfg 配置標(biāo)簽文本。支持 節(jié)點(diǎn)通用標(biāo)簽配置。基于上面 樣式屬性 style 中的代碼，下面代碼在 defaultNode 中增加了 ?labelCfg? 配置項(xiàng)進(jìn)行文本的配置，使之達(dá)到如下圖效果。

const data = {// ... data 內(nèi)容 }; const graph = new G6.Graph({// ... 圖的其他屬性defaultNode: {// ... 節(jié)點(diǎn)其他屬性labelCfg: {position: 'center',style: {fill: '#9254de',fontSize: 18,},},}, }); // ...

###?linkPoints Object 類型。通過配置 linkPoints ，可以指定節(jié)點(diǎn)上「上、左、右」三個(gè)小圓點(diǎn)。

?? 注意: 區(qū)分于 anchorPoints： anchorPoints 是真正用于指定該節(jié)點(diǎn)相關(guān)邊的連入位置的「數(shù)組」，見 anchorPoints；而 linkPoints 僅是指定是否「繪制」出四個(gè)圓點(diǎn)，不起實(shí)際的連接相關(guān)邊的作用。二者常常配合使用。

名稱含義類型備注

top	是否顯示上部的圓點(diǎn)	Boolean	默認(rèn)為 false
left	是否顯示左側(cè)的圓點(diǎn)	Boolean	默認(rèn)為 false
right	是否顯示右側(cè)的圓點(diǎn)	Boolean	默認(rèn)為 false
size	圓點(diǎn)的大小	Number	默認(rèn)為 3
fill	圓點(diǎn)的填充色	String	默認(rèn)為 '#72CC4A'
stroke	圓點(diǎn)的邊框顏色	String	默認(rèn)為 '#72CC4A'
lineWidth	圓點(diǎn)邊框的寬度	Number	默認(rèn)為 1

基于上面 樣式屬性 style 中的代碼，下面代碼在 defaultNode 中增加了 ?linkPoints? 配置項(xiàng)進(jìn)行連入點(diǎn)的配置，使之達(dá)到如下圖效果。

const data = {// ... data 內(nèi)容 }; const graph = new G6.Graph({// ... 圖的其他屬性defaultNode: {// ... 其他屬性linkPoints: {top: true,bottom: true,left: true,right: true,fill: '#fff',size: 5,},}, }); // ...

圖標(biāo) ?icon

Object 類型。通過配置 icon，可以在圓上顯示小圖標(biāo)。

名稱含義類型備注

show	是否顯示 icon	Boolean	默認(rèn)為 false，不顯示
width	icon 的寬度	Number	默認(rèn)為 16
height	icon 的高度	Number	默認(rèn)為 16
img	icon 的圖片地址	String	默認(rèn)有一個(gè)如下圖中的圖片
offset	icon 的偏移量	Number	默認(rèn)為 0，triangle 節(jié)點(diǎn)的 icon 特有的配置

基于上面 樣式屬性 style 中的代碼，下面代碼在 defaultNode 中增加了 icon? 配置項(xiàng)進(jìn)行圖標(biāo)的配置，使之達(dá)到如下圖效果。

const data = {// ... data 內(nèi)容 }; const graph = new G6.Graph({// ... 圖的其他屬性defaultNode: {// ... 其他屬性icon: {show: true,width: 30,height: 30,offset: 20,},}, }); // ...

總結(jié)

以上是生活随笔為你收集整理的核心概念——节点/边/Combo——内置节点——Triangle的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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