前言:接本专栏上篇文章,实现一个新需求,如有不懂的可先去看新手教程
需求描述:如何在节点旁添加多个标签,如下图所示:
实现该需求目前我只想到两种方法:
方法一:使用换行符将不同的标签连接在一起。这种方式简单,但不够灵活。
方法二:通过在节点的 attrs
中添加自定义 SVG 创建多个文本标签。你可以根据需要调整这些标签的位置和样式。
先简单说一下方法一,就是在添加节点的label标签里直接使用换行符:
这种方法太局限了,只能适应简单的需求,无法给标签加更多的设计
方法二:添加自定义 SVG 标签
1、配置添加节点方法里面的ports,之前我们只在节点上加了连接桩,现在再加三个组展示新的标签
代码位置如下图:
具体代码:
ports: {
groups: {
group1: {
position: [30, 30],
},
group2: {
position: [0, 10],
attrs: {
circle: {
r: 0, // 设定半径为0,隐藏圆圈
},
},
},
group3: {
position: [0, 20],
attrs: {
circle: {
r: 0, // 设定半径为0,隐藏圆圈
},
},
},
group4: {
position: [0, 30],
attrs: {
circle: {
r: 0, // 设定半径为0,隐藏圆圈
},
},
},
},
items: [
{
group: "group1",
id: "port1",
attrs: {
circle: {
r: 6,
magnet: true,
stroke: "#ffffff",
strokeWidth: 2,
fill: "#5F95FF",
},
},
},
{
id: "label1",
group: "group2",
attrs: {
text: {
text: "标签1",
fill: "#333",
fontSize: 12,
},
},
},
{
id: "label2",
group: "group3",
attrs: {
text: {
text: "标签2",
fill: "#333",
fontSize: 12,
},
},
},
{
id: "label3",
group: "group4",
attrs: {
text: {
text: "标签3",
fill: "#333",
fontSize: 12,
},
},
},
],
},
代码解释:
1、这里写了四个group,group1就是之前写的连接桩,其他三个就是我们要添加的标签所在的组,因为防止三个标签重叠,所以我分成了三个组去分别写了position
2、因为使用了端口(ports)来添加标签。默认情况下,端口会显示一个圆形标记,因此默认情况下你看到三个白色的圈。这里我给那三个group加了以下代码去隐藏了那三个圈。
attrs: {
circle: {
r: 0, // 设定半径为0,隐藏圆圈
},
},