Question

我正在尝试在jsPlumb中创建从一个源到多个目标的连接。我想使用数组定义目标。但是，每当我尝试这样做时，jsPlumb总是只选择数组中的第一项，而不是全部使用它们。

例如，我使用两个元素的id来定义我的数组：

var test = ['s4', 's3'];

然后，jsPlumb创建程序化连接：

    jsPlumb.ready(function() {


    jsPlumb.connect({

        source:"element1", 
        target: test,
        anchors:["Left", "Left" ],
        endpoint:"Blank", /* note that you can also make this "image" if you want something fancy */
        endpointStyle:{ fillStyle: "red"},
        paintStyle:{strokeStyle:"red", lineWidth:3},
        connector:[ "Flowchart", { cornerRadius:"200", stub:"40"} ] 

    });


})

这只会在＃element1和＃s4之间创建一个连接。我错了什么？我找不到关于如何在程序化连接的上下文中使用数组的文档。

Answer 1

尝试将代码循环到多个目标，如下所示：

var start = 'element1';
var end = ['s4','s3'];    

for(var i=0;i<end.length;i++)
{
        jsPlumb.connect({
                source:start,
                target:end[i],
                connector:[ "Flowchart", { cornerRadius:"200", stub:"40"} ],
                paintStyle:{strokeStyle:"red", lineWidth:3},
                endpointStyle:{ fillStyle: "red"},
                anchors:["Left", "Left" ],
                endpoint:"Blank"
        })
}

类似的问题：How can I connect multiple targets from a single source?

Answer 2

如文档中所述，您无法在.connect方法的目标字段中传递数组。

DOCS - http://jsplumbtoolkit.com/apidocs/classes/jsPlumbInstance.html#method_connect

要将相同的源连接到多个目标，只需每次使用.connect方法多次使用不同的目标。

如果要限制可以从单个端点建立的连接数（默认情况下不受限制），则可以使用maxConnections属性 - http://jsplumbtoolkit.com/apidocs/classes/jsPlumbInstance.html#method_makeTarget

在jsPlumb中使用数组作为目标

2 个答案: