You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

GoJS中如何组合“可拖拽链接”与“链接到链接”功能?

解决GoJS中拖拽Palette链接后无法被其他链接连接的问题

看起来你已经走对了大部分路,核心问题在于从Palette拖拽到Diagram的链接没有自动创建并关联用于接受连接的LinkLabel节点。当你直接拖拽Palette里的链接时,只会复制链接本身的数据,不会自动生成对应的Label节点,也不会把Label的key添加到链接的labelKeys数组中——而这正是让链接能被其他链接连接的关键。

下面是具体的修复步骤和代码调整:

1. 补充拖拽完成事件监听

在Diagram初始化代码中,添加ExternalObjectsDropped事件监听,当从Palette拖拽链接进来后,自动为需要支持link-to-link的链接创建LinkLabel节点并关联:

// 在你的diagram初始化代码末尾添加这个监听
myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {
  // 遍历所有被拖拽进来的元素
  e.subject.each(function(part) {
    // 只处理链接类型的元素
    if (part instanceof go.Link) {
      const link = part;
      // 针对需要支持link-to-link的链接类别(linkToLink、Marriage)
      if (link.category === "linkToLink" || link.category === "Marriage") {
        const linkData = link.data;
        // 如果链接还没有关联Label节点
        if (!linkData.labelKeys || linkData.labelKeys.length === 0) {
          // 在model事务中修改数据,保证Undo/Redo正常工作
          myDiagram.model.commit(function(m) {
            // 创建LinkLabel节点数据
            const labelNodeData = { category: "LinkLabel" };
            // 添加节点到model并获取其key
            const labelKey = m.addNodeData(labelNodeData);
            // 将Label节点的key绑定到链接的labelKeys数组
            m.setLinkDataProperty(linkData, "labelKeys", [labelKey]);
          }, "add link label for dropped link");
        }
      }
    }
  });
});

2. 优化链接模板(可选但推荐)

你的linkToLink模板缺少路由、曲线等配置,建议和其他链接模板保持一致,让拖拽后的链接行为统一:

myDiagram.linkTemplateMap.add("linkToLink", 
  $(go.Link, 
    { 
      relinkableFrom: true, 
      relinkableTo: true,
      reshapable: true,
      routing: go.Link.AvoidsNodes, 
      curve: go.Link.JumpOver, 
      corner: 5, 
      toShortLength: 4 
    },
    new go.Binding('points').makeTwoWay(),
    $(go.Shape, { stroke: "#2D9945", strokeWidth: 2 })
  )
);

修复原理说明

  • 当你从Palette拖拽链接时,ExternalObjectsDropped事件会被触发,我们在事件处理中检查链接类别,为需要支持link-to-link的链接自动创建LinkLabel节点。
  • 通过model.commit包裹修改操作,确保GoJS的数据一致性和Undo/Redo功能正常。
  • 把Label节点的key添加到链接的labelKeys数组后,GoJS会自动将Label节点放置在链接的路径上,其他链接就可以连接到这个Label节点的port上了。

现在你再拖拽linkToLink或Marriage链接到图中,就能看到链接上出现小椭圆的Label节点,其他链接也可以正常连接到这个节点上啦。

内容的提问来源于stack exchange,提问作者FNK

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.14 07:15:43