Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jsPlumb-使用源和目标的单个端点绘制多个连接_Javascript_Svg_Jsplumb - Fatal编程技术网

Javascript jsPlumb-使用源和目标的单个端点绘制多个连接

Javascript jsPlumb-使用源和目标的单个端点绘制多个连接,javascript,svg,jsplumb,Javascript,Svg,Jsplumb,我正在尝试仅使用一个端点创建从源到目标的多个连接 基本上,当用户试图从源重新绘制到同一节点的第二条路径时,连接源和目标的路径应该在单个端点处拆分和重新连接。此外,每个连接都会贴上标签 因此,该图看起来像是一条直线,分成多条路径,从同一个端点到另一个端点 类似于图像中附加的内容 我只是想知道这是否可以通过使用社区版实现,或者我们应该使用付费版的JSPlumb 提前感谢,, Balaji对端点(连接的一端)建模。端点有一个基础锚点,它决定端点的位置。每个端点可以有1到maxConnections连接

我正在尝试仅使用一个端点创建从源到目标的多个连接

基本上,当用户试图从源重新绘制到同一节点的第二条路径时,连接源和目标的路径应该在单个端点处拆分和重新连接。此外,每个连接都会贴上标签

因此,该图看起来像是一条直线,分成多条路径,从同一个端点到另一个端点

类似于图像中附加的内容

我只是想知道这是否可以通过使用社区版实现,或者我们应该使用付费版的JSPlumb

提前感谢,,
Balaji对端点(连接的一端)建模。端点有一个基础锚点,它决定端点的位置。每个端点可以有1到maxConnections连接(将maxConnections设置为-1以允许无限连接;默认值为1)

HTML

Javascript

jsPlumb.ready(function () {

    /*Second Instance*/
    var instance = jsPlumb.getInstance();
    instance.importDefaults({
        Connector: ["Bezier", {
            curviness: 150
        }],
        Anchors: ["BottomCenter", "TopCenter"]
    });

    instance.connect({
        source: "item_input",
        target: "downstream_1",
        scope: "someScope"
    });
    instance.connect({
        source: "item_input",
        target: "downstream_2",
        scope: "someScope"
    });
    instance.connect({
        source: "item_input",
        target: "downstream_3",
        scope: "someScope"
    });
});
.item {
    height:80px;
    width: 80px;
    border: 1px solid blue;
    float: left;
}
.ds {
    width:100px;
    height:100px;
    border:1px solid brown;
    float:left;
    margin-left:50px;
}
.down{
    width:100%;
    height:auto;
    float:left;
}
.itemin{
    margin-top:150px;
    margin-bottom:100px;
    border:2px pink solid;
    width:100px;
    height:100px;
    float:left;
}
jsPlumb.ready(function () {

    /*Second Instance*/
    var instance = jsPlumb.getInstance();
    instance.importDefaults({
        Connector: ["Bezier", {
            curviness: 150
        }],
        Anchors: ["BottomCenter", "TopCenter"]
    });

    instance.connect({
        source: "item_input",
        target: "downstream_1",
        scope: "someScope"
    });
    instance.connect({
        source: "item_input",
        target: "downstream_2",
        scope: "someScope"
    });
    instance.connect({
        source: "item_input",
        target: "downstream_3",
        scope: "someScope"
    });
});