jsPlumb — рисование нескольких соединений с использованием одной конечной точки для источника и цели

Я пытаюсь создать более одного соединения от источника к цели, используя только одну конечную точку.

По сути, когда пользователь пытается повторно нарисовать второй путь к тому же узлу из источника, путь, соединяющий источник и пункт назначения, должен разделиться и воссоединиться в одной конечной точке. Кроме того, к каждому соединению будет прикреплена метка.

Чтобы диаграмма выглядела как одна линия, разделенная на несколько путей к одной и той же конечной точке и из нее.

Что-то вроде того, что прикреплено на картинке.

Мне просто интересно, можно ли этого добиться с помощью версии сообщества, или нам стоит перейти на платную версию JSPlumb? Что-то вроде прикрепленного на изображении

Заранее спасибо, Баладжи


javascript svg jsplumb
person user3099252    schedule 26.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Моделирует конечную точку — один конец соединения. Конечная точка имеет базовую привязку, которая определяет положение конечной точки. Каждая конечная точка может иметь исходящие от нее соединения от 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"
    });
});
person Haldny Santos    schedule 30.07.2017