3

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

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

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

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

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

4

2 回答 2

4 
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

于 2014-06-11T17:49:15.220 回答
3

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

使用 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;
    } 
});

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

于 2013-02-26T15:29:51.683 回答