Question

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

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

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

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

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

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。

查看是否存在具有相同来源的其他连接＆amp;目标存在，如果是，则分离新创建的目标。（jsPlumb ver.1.5.5 - 1.6.1）

<强>更新

在2.4之后的版本中使用jsPlumb.deleteConnection而不是jsPlumb.detach

Answer 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;
    } 
});

您可以将粉红色与绿色连接。粉红色与粉红色和绿色与粉红色和绿色与绿色不允许。

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

2 个答案: