G6 內置了圓 Circle 節點，其默認樣式如下。標簽文本位于圓形中央。

使用方法

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

1 實例化圖時全局配置

用戶在實例化 Graph 時候可以通過 defaultNode 指定 type 為 ‘circle’，即可使用 circle 節點。

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

2 在數據中動態配置

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

const data = {nodes: [{id: 'node0',type: 'circle', // 節點類型... // 其他配置},... // 其他節點],edges: [... // 邊] }

配置項說明

circle 節點支持 節點通用配置，下表對部分屬性進行解釋。對于 Object 類型的配置項將在后面有詳細講解：

名稱含義類型備注

size	圓的直徑	Number / Array	size 為數組時，取第一個值
style	circle 默認樣式	Object	Canvas 支持的屬性
label	標簽文本內容	String
labelCfg	標簽文本配置項	Object
stateStyles	各狀態下的樣式	Object	詳見配置狀態樣式
linkPoints	視覺上的四個錨點	Object	默認不顯示，應與 anchorPoints 配合使用。二者區別請看 linkPoints
icon	圓上 icon 配置	Object	默認不顯示 icon

樣式屬性 style

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

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

標簽文本配置 labelCfg

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

const data = {// ... data 內容 }; const graph = new G6.Graph({// ... 圖的其他屬性defaultNode: {// ... 節點其他屬性labelCfg: {position: 'bottom',offset: 10,style: {// ... 文本樣式的配置},},}, }); // ...

linkPoints

Object 類型。可以指定節點周圍「上、下、左、右」四個方向上的四個小圓點。

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

名稱含義類型備注

top	是否顯示上部的圓點	Boolean	默認為 false
bottom	是否顯示底部的圓點	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

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

const data = {// ... data 內容 }; const graph = new G6.Graph({// ... 圖的其他屬性defaultNode: {// ... 其他屬性icon: {show: true,//img: '...', 可更換為其他圖片地址width: 25,height: 25,},}, }); // ... 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

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