防止两个连接共享同一个锚点答案

【问题标题】：Prevent two connections from sharing the same anchor防止两个连接共享同一个锚点
【发布时间】：2013-02-22 18:26:01
【问题描述】：

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

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

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

如果您阅读源代码，您可以看到这是通过拥有一组“源”锚点和一组“目标”锚点来完成的，并且连接是专门从第一组锚点到第二组锚点建立的。但是，如上所述，我可以拥有多达十几种类型的连接，这些连接可以连接到我的端点或连接到我的端点，因此我不想为每个端点指定一组唯一的锚点。这将限制我可以沿着端点边缘在每个潜在锚点之间留下的间距量，因为每组锚点都不能与任何其他锚点集相交。

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

【问题讨论】：

等待以下答案的反馈。
@user200780 你的两个解决方案都没有回答问题

标签： jsplumb

【解决方案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

【讨论】：

【解决方案2】：

有没有办法告诉 jsPlumb 我不想共享连接相同的锚点？

Demo with JS Fiddle

JQuery

jsPlumb.bind("jsPlumbConnection", function (CurrentConnection) {
    var DuplicateCount = 0;
    var allConn = jsPlumb.getAllConnections();
    var length = allConn["green dot"].length;
    for (var i = 0; i < length; i++) {
        if (allConn["green dot"][i].targetId ==               
                                         CurrentConnection.connection.targetId) {
            DuplicateCount = DuplicateCount + 1;
        }
    }
    if (DuplicateCount > 1) {
        jsPlumb.detach(CurrentConnection.connection);
        return;
    } 
});

您可以将粉色与绿色连接起来。粉色搭配粉色，绿色搭配粉色，绿色搭配绿色。

【讨论】：