简易个人网站系列推广软文范例

前言：接本专栏上篇文章，实现一个新需求，如有不懂的可先去看新手教程

需求描述：如何在节点旁添加多个标签，如下图所示：

实现该需求目前我只想到两种方法：

方法一：使用换行符将不同的标签连接在一起。这种方式简单，但不够灵活。

方法二：通过在节点的 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，隐藏圆圈},},