Triangle
Triangle
G6 内置了三角形 Triangle 节点,其默认样式如下。标签文本位于三角形下方。
使用方法
如 内置节点 一节所示,配置节点的方式有两种:实例化图时全局配置,在数据中动态配置。
1 实例化图时全局配置
用户在实例化 Graph 时候可以通过 defaultNode
指定 shape
为 'triangle'
,即可使用 triangle
节点。
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
defaultNode: {
shape: 'triangle',
// 其他配置
},
});
2 在数据中动态配置
如果需要使不同节点有不同的配置,可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据,也可以通过遍历数据的方式写入。
const data = {
nodes: [{
id: 'node0',
shape: 'triangle',
... // 其他配置
},
... // 其他节点
],
edges: [
... // 边
]
}
配置项说明
triangle 节点支持 节点通用配置,下表对部分属性进行解释:
名称 | 含义 | 类型 | 备注 |
---|---|---|---|
size | 三角形的边长 | Number | Array |
direction | 三角形的方向 | String | 可取值:'up' ,'down' ,'left' ,'right' 。默认为 'up' |
style | 三角形默认样式 | Object | Canvas 支持的属性 |
label | 标签文本内容 | String | |
labelCfg | 标签文本配置项 | Object | |
stateStyles | 各状态下的样式 | Object | 只对 keyShape 起作用 |
linkPoints | 视觉上的三个锚点 | Object | 默认不显示,应与 anchorPoints 配合使用。二者区别请看 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: {
shape: 'triangle',
direction: 'down',
},
});
上图分别是将
direction
配置为'up'
,'down'
,'left'
,'right'
的结果
样式属性 style
Object 类型。支持 节点通用样式。通过 style
配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 style
,使之达到如下图效果。
const data = {
nodes: [
{
x: 100,
y: 100,
shape: 'triangle',
label: 'triangle',
},
],
};
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
defaultNode: {
// shape: 'triangle', // 在数据中已经指定 shape,这里无需再次指定
direction: 'up',
size: 100,
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: 'center',
style: {
fill: '#9254de',
fontSize: 18,
},
},
},
});
// ...
linkPoints
Object 类型。通过配置 linkPoints
,可以指定节点上「上、左、右」三个小圆点。
⚠️注意:区分于 anchorPoints
:
anchorPoints
是真正用于指定该节点相关边的连入位置的「数组」,见 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 节点的 icon 特有的配置 |
基于上面 样式属性 style 中的代码,下面代码在 defaultNode
中增加了 icon
配置项进行图标的配置,使之达到如下图效果。
const data = {
// ... data 内容
};
const graph = new G6.Graph({
// ... 图的其他属性
defaultNode: {
// ... 其他属性
icon: {
show: true,
width: 30,
height: 30,
offset: 20,
},
},
});
// ...