在jsplump中使用数组作为目标

Using array as target in jsPlumb

本文关键字：目标 数组 jsplump      更新时间：2023-09-26

我正在尝试在jsplump中创建从一个源到多个目标的连接。我想用一个数组来定义目标。但是，每当我尝试这样做时，jsplumbb总是简单地选择数组中的第一项，而不是使用所有项。

例如，我使用两个元素的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之间创建连接。我说错了什么?关于如何在编程连接的上下文中使用数组，我找不到太多的文档。

尝试为多个目标循环代码，如下所示:

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"
        })
}

类似的问题:如何从单个源连接多个目标?

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

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

对于同一源连接多个目标，只需多次使用.connect方法，每次使用不同的目标。

如果你想限制连接的数量，可以从一个端点(默认无限制)，然后你可以使用maxConnections属性- http://jsplumbtoolkit.com/apidocs/classes/jsPlumbInstance.html#method_makeTarget

相关文章：