---

title: Diamond
order: 4

Diamond

G6 內(nèi)置了菱形 ?Diamond? 節(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í)候可以通過(guò) defaultNode 指定 type 為 'diamond'，即可使用 diamond 節(jié)點(diǎn)。

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

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

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

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

配置項(xiàng)說(shuō)明

Diamond 節(jié)點(diǎn)支持 節(jié)點(diǎn)通用配置，下表對(duì)部分屬性進(jìn)行解釋。對(duì)于 Object 類型的配置項(xiàng)將在后面有詳細(xì)講解：

名稱含義類型備注

size	菱形的寬高	Number / Array	size 為一個(gè)數(shù)值時(shí)，寬高相同
style	diamond 默認(rèn)樣式	Object	Canvas 支持的屬性
label	標(biāo)簽文本內(nèi)容	String
labelCfg	標(biāo)簽文本配置項(xiàng)	Object
stateStyles	各狀態(tài)下的樣式	Object	詳見(jiàn)配置狀態(tài)樣式
linkPoints	視覺(jué)上的四個(gè)錨點(diǎn)	Object	默認(rèn)不顯示，應(yīng)與 anchorPoints 配合使用。二者區(qū)別請(qǐng)看 linkPoints
icon	菱形上 icon 配置	Object	默認(rèn)不顯示 icon

樣式屬性 style

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

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

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

Object 類型。通過(guò) 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: {style: {fill: '#9254de',fontSize: 18,},position: 'bottom',},}, }); // ...

linkPoints

Object 類型。通過(guò)配置 linkPoints ，可以指定菱形周圍「上、下、左、右」四個(gè)小圓點(diǎn)。

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

名稱含義類型備注

top	是否顯示上部的圓點(diǎn)	Boolean	默認(rèn)為 false
bottom	是否顯示底部的圓點(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: {// ... 節(jié)點(diǎn)其他屬性linkPoints: {top: true,bottom: true,left: true,right: true,size: 5,fill: '#fff',},}, }); // ...

圖標(biāo) ?icon

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

名稱含義類型備注

show	是否顯示 icon	Boolean	默認(rèn)為 false，不顯示
width	icon 的寬度	Number	默認(rèn)為 16
height	icon 的高度	Number	默認(rèn)為 16
img	icon 的地址	String

下面代碼演示在實(shí)例化圖時(shí)全局配置方法中配置 icon。

const data = {// ... data 內(nèi)容 }; const graph = new G6.Graph({// ... 圖的其他屬性defaultNode: {// ... 節(jié)點(diǎn)其他屬性icon: {show: true,width: 25,height: 25,},}, }); // ...

總結(jié)

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

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