vue3 vite antv/x6 渲染自定义的节点与节点间连线失败

前提背景：

数据源节点和目标节点都拿到了，创建的边也有实例，也确认了节点位置是在视图范围内的，节点也是可以正常渲染出来。但是页面上就是没有渲染出来边，控制台也没有报错。看html结构，边的宽和高这些都是0，可是加了宽和高也没有展示。

思考过程：

搞了一个简化版的，连箭头都没有展示出来，我就知道大事不妙了。

尝试了各种办法，终于搞出来了箭头。

这个时候我尝试改了渲染的方式，看起来好像是因为用了render，而不是用template。
我就在想说不然干脆把画布这块单独抽离出来变成一个组件，再使用render的方式渲染，看看能不能有连线，然鹅不出意料地依然失败了。

解决方案：

因为我发现单独抽出来用render也不行，我又开始看组件库文档，真的那几天快熟读背诵了。
最终发现应该是创建边的方式不同。我改了边数据的遍历方式，终于可以了！！！
效果图我就不放了，其实就是两排自定义的节点以及节点和节点之间如果有关联，就要连上线，并且线上有具体数值的内容。
附上解决方案的代码：

//在画布初始化的时候还要加上这些配置项：
 connecting: {
        snap: true,
        allowBlank: false,
        allowLoop: false,
        highlight: true,
        // connector: 'i-connector',
        // connectionPoint: 'anchor',
        // anchor: 'center',
        validateMagnet: ({ magnet }) => {
          return magnet.getAttribute('port-group') !== 'top';
        },
 
        createEdge() {
          return graphInstance.value.createEdge({
            shape: 'dag-edge',
            attrs: {
              line: {
                strokeDasharray: '5 5',
              },
            },
            labels: [
              {
                attrs: {
                  label: {
                    text: 'My Custom Label',
                    fill: '#333',
                    fontSize: 12,
                  },
                },
                position: {
                  distance: 0.5, // 标签位置，0 表示最靠近源节点，1 表示最靠近目标节点
                },
              },
            ],
            zIndex: -1,
          });
        },
      },
      panning: {
        enabled: true,
        modifiers: 'shift', // 按住 shift 键进行平移
      },复制

并且使用addEdge的方法把具体的边的实例添加到画布当中。

以上~