jsPlumb - 使用单个端点为源和目标绘制多个连接答案

【问题标题】：jsPlumb - Drawing multiple connections using single endpoint for source and targetjsPlumb - 使用单个端点为源和目标绘制多个连接
【发布时间】：2017-07-26 11:37:33
【问题描述】：

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

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

因此图表看起来像一条线，分成多个路径，往返于同一端点。

类似于图片中的那个。

我只是想知道这是否可以使用社区版来实现，或者我们应该使用 JSPlumb 的付费版本吗？ Something like the one attached in the image

提前致谢，巴拉吉

【问题讨论】：

标签： javascript svg jsplumb

【解决方案1】：

对端点建模 - 连接的一端。 Endpoint 有一个底层 Anchor，它决定了 Endpoint 的位置。每个 Endpoint 可以有 1 到 maxConnections 个连接（将 maxConnections 设置为 -1 以允许无限连接；默认值为 1）。

http://jsfiddle.net/dL1ua517/

HTML

<div id="item_input" class="itemin">PROJECT NAME</div>
<div class="down">
    <div id="downstream_1" class="ds">Output 1</div>
    <div id="downstream_2" class="ds">Output 2</div>
    <div id="downstream_3" class="ds">Output 3</div>
</div>

CSS

.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;
}

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

【讨论】：