---

title: Triangle
order: 5

Triangle

G6 內置了三角形 ?Triangle 節(jié)點，其默認樣式如下。標簽文本位于三角形下方。

使用方法

如 內置節(jié)點 一節(jié)所示，配置節(jié)點的方式有兩種：實例化圖時全局配置，在數據中動態(tài)配置。

1 實例化圖時全局配置

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

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

2 在數據中動態(tài)配置

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

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

配置項說明

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

名稱含義類型備注

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

三角形方向 direction

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

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

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

樣式屬性 style

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

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', // 在數據中已經指定 type，這里無需再次指定direction: 'up',size: 100,style: {fill: '#bae637',stroke: '#eaff8f',lineWidth: 5,},}, }); graph.data(data); graph.render();

標簽文本配置 labelCfg

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

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

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

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

名稱含義類型備注

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

基于上面 樣式屬性 style 中的代碼，下面代碼在 defaultNode 中增加了 ?linkPoints? 配置項進行連入點的配置，使之達到如下圖效果。

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

圖標 ?icon

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

名稱含義類型備注

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

基于上面 樣式屬性 style 中的代碼，下面代碼在 defaultNode 中增加了 icon? 配置項進行圖標的配置，使之達到如下圖效果。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。