antv X6--实现节点旁添加多个text标签

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

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

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

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

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