jsPlumb - 使用單個端點爲源和目標繪製多個連接

Question

我正嘗試使用一個端點創建從源到目標的多個連接。

基本上，當用戶嘗試從源中重新繪製第二條路徑到同一節點時，連接源和目標的路徑應該拆分並重新加入單個端點。另外，每個連接都會附加一個標籤。

爲了使圖表看起來像是一條線路分成多個往返於同一端點的路徑。

類似於圖像中附加的東西。

我只是想知道是否可以使用社區版本來實現，或者我們應該購買JSPlumb的付費版本嗎？ Something like the one attached in the image

由於提前， 巴拉吉

Answer 1

模型端點 - 一個連接的一端。一個Endpoint有一個底層Anchor，它決定了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" 
    }); 
});