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

使用方法

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

1 實例化圖時全局配置

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

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

2 在數據中動態配置

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

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

配置項說明

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

名稱含義類型備注

size	rect 的寬高	Number	Array
style	rect 默認樣式	Object	Canvas 支持的屬性
label	標簽文本內容	String
labelCfg	標簽配置項	Object
stateStyles	各狀態下的樣式	Object	只對 keyShape 起作用
linkPoints	視覺上的四個錨點	Object	默認不顯示，應與 anchorPoints 配合使用。二者區別請看 linkPoints

樣式屬性 style

Object 類型。支持 節點通用樣式。通過 style 配置來修改 rect 的填充色、邊框顏色、陰影等屬性。

名稱含義類型備注

radius	圓角半徑	Number	默認為直角矩形
stroke	描邊顏色	String
lineWidth	描邊粗細	Number	默認為 1
fill	填充色	String
fillOpacity	透明度	Number	默認為 1

下面代碼演示在實例化圖時全局配置方法中配置 style，使之達到如下圖效果。

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

標簽文本配置 labelCfg

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

const data = {// ... data 內容 }; const graph = new G6.Graph({// ... 圖的其他配置defaultNode: {// ... 其他配置labelCfg: {style: {fill: '#9254de',fontSize: 18,},position: 'bottom',},}, }); // ...

linkPoints

Object 類型。通過配置 linkPoints ，可以指定矩形周圍「上、下、左、右」四個小圓點。

?? 注意: 區分于 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,size: 5,fill: '#fff',},}, }); // ...

總結

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

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