核心概念——节点/边/Combo——内置节点——Triangle
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,使之達到如下圖效果。
標簽文本配置 labelCfg
Object 類型。通過 labelCfg 配置標簽文本。支持 節(jié)點通用標簽配置。基于上面 樣式屬性 style 中的代碼,下面代碼在 defaultNode 中增加了 ?labelCfg? 配置項進行文本的配置,使之達到如下圖效果。
###?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? 配置項進行連入點的配置,使之達到如下圖效果。
圖標 ?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? 配置項進行圖標的配置,使之達到如下圖效果。
總結
以上是生活随笔為你收集整理的核心概念——节点/边/Combo——内置节点——Triangle的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 核心概念——节点/边/Combo——内置
- 下一篇: uwsgi: error while l