jsplumb - 防止两个连接共享同一个 anchor

Question

我正在使用 jsPlumb 来允许用户构建图表。我允许用户四处拖动这些元素，因此我为每个端点使用了一组 anchor ，让 jsPlumb 在建立连接时为我从该集合中选择“最佳” anchor 。我遇到的问题是，我可能有多达十几个来自任何给定端点的连接，因此当许多人最终选择相同的“最佳” anchor 时，这些连接将在视觉上分散注意力——在图表中造成拥塞现象.为了解决这个问题，我想告诉 jsPlumb 限制任何两个连接在端点上共享同一个 anchor 。

可视化我希望实现的目标的最简单方法是在这个演示中: https://jsplumbtoolkit.com/community/demo/dynamicAnchors/index.html

开箱即用，此演示中的所有连接都不会重叠。

如果您阅读源代码，您会发现这是通过拥有一组“源” anchor 和一组“目标” anchor 来完成的，并且仅从第一组 anchor 到第二组 anchor 建立连接。然而，正如我上面所说的，我可以有多达十几种类型的连接，这些连接可以连接到我的端点，所以我不想为它们中的每一个指定一组唯一的 anchor 。这将限制我可以沿端点边缘在每个潜在 anchor 之间留下的间距量，因为每组 anchor 都不能与任何其他 anchor 组相交。

有没有办法告诉 jsPlumb 我不希望连接共享相同的 anchor ？

Answer 1

jsPlumb.bind('connection',function(info){
 var con=info.connection;
 var arr=jsPlumb.select({source:con.sourceId,target:con.targetId});
 if(arr.length>1){
    jsPlumb.detach(con);
 }
});

一个简洁的，带有 jsPlumb 更新的 API。

查看是否存在另一个具有相同源和目标的连接，如果是，则分离新创建的连接。 (jsPlumb 版本 1.5.5 - 1.6.1)

更新:

2.4以后的版本使用jsPlumb.deleteConnection代替jsPlumb.detach