如何在JsPlumb中使用邊建立連接？

Question

如何設置一個JsPlumb連接，該連接在中間分割並轉到多個端點，如下圖所示：

甲：連接兩個端點與一個連接：

B：連接兩個端點與一個連接：

C：連接三個端點與一個連接：

編輯：使用FlowChart選項我得到一個奇怪的錯誤，這是一個小點，見下圖。

Answer 1

下面的鏈接與腳本的jsfiddle。所有藍色塊都是可拖動的，因此您可以嘗試塊位置和連接行爲。

而且我這麼大的回答很抱歉;）

答：連接兩個端點的一個連接：

http://jsfiddle.net/TkyJB/2/

jsPlumb.ready(function() { 

    // default settings for connectors 
    var connectionParams = { 
     connector: ["Flowchart", {cornerRadius:1}], 
     paintStyle:{ 
      lineWidth: 1, 
      outlineColor:"blue", 
      outlineWidth: 0 
     }, 
     detachable:false, 
     endpointStyle: { radius:1 } 
    }; 

    // w2 <=> w1 
    jsPlumb.connect({ 
     source: "window2", 
     target: "window1", 
     anchors: ["TopCenter", "Left"] 
    }, connectionParams); 

    // w2 <=> w2 
    jsPlumb.connect({ 
     source: "window2", 
     target: "window3", 
     anchors: ["BottomCenter", "Left"] 
    }, connectionParams); 

    // 
    jsPlumb.draggable(
     jsPlumb.getSelector(".window"), 
     { containment:".demo"} 
    ); 
}); 

B：使用一個連接連接兩個端點：

jsPlumb規則：兩個窗口之間的一個連接。因此，如果您需要分割一些連接，您需要創建代理點，這將作爲一個寡婦的源代碼，並且將爲其他窗口創建2個新連接。

http://jsfiddle.net/TkyJB/8/

jsPlumb.ready(function() { 

    // default settings for connectors 
    var connectionParams = { 
     connector: ["Flowchart", {cornerRadius:1}], 
     paintStyle:{ 
      lineWidth: 1, 
      outlineColor:"green", 
      outlineWidth: 0 
     }, 
     detachable:false, 
     endpointStyle: { radius:1 } 
    }; 

    // w1 <=> w1s 
    jsPlumb.connect({ 
     source: "window1", 
     target: "window1s", 
     anchors: ["Right", "Center"], 
     anchor:[ "Perimeter", { shape:"Circle" } ] 
    }, connectionParams); 

    // w1s <=> w2 
    jsPlumb.connect({ 
     source: "window1s", 
     target: "window2", 
     anchors: ["Center", "Bottom"] 
    }, connectionParams); 

    // w1s <=> w3 
    jsPlumb.connect({ 
     source: "window1s", 
     target: "window3", 
     anchors: ["Center", "Top"] 
    }, connectionParams); 

    // 
    jsPlumb.draggable(
     jsPlumb.getSelector(".window"), 
     { containment:".demo"} 
    ); 
}); 

C：連接三個端點與一個連接：

這將是一樣的 'B'，但具有極佳的隱蔽代理-塊。

http://jsfiddle.net/TkyJB/7/

jsPlumb.ready(function() { 

    // default settings for connectors 
    var connectionParams = { 
     connector: ["Flowchart", {cornerRadius:1}], 
     paintStyle:{ 
      lineWidth: 1, 
      outlineColor:"blue", 
      outlineWidth: 0 
     }, 
     detachable:false, 
     endpointStyle: { radius:1 } 
    }; 

    // w1 <=> w1s1 
    jsPlumb.connect({ 
     source: "window1", 
     target: "window1s1", 
     anchors: ["Right", "Center"] 
    }, connectionParams); 

    // w1s1 <=> w1s2 
    jsPlumb.connect({ 
     source: "window1s1", 
     target: "window1s2", 
     anchors: ["Center", "Center"] 
    }, connectionParams); 

    // w1s1 <=> w2 
    jsPlumb.connect({ 
     source: "window1s1", 
     target: "window2", 
     anchors: ["TopCenter", "Left"] 
    }, connectionParams); 

    // w1s1 <=> w3 
    jsPlumb.connect({ 
     source: "window1s1", 
     target: "window3", 
     anchors: ["BottomCenter", "Left"] 
    }, connectionParams); 

    // w1s2 <=> w4 
    jsPlumb.connect({ 
     source: "window1s2", 
     target: "window4", 
     anchors: ["Right", "Left"] 
    }, connectionParams); 

    // 
    jsPlumb.draggable(
     jsPlumb.getSelector(".window"), 
     { containment:".demo"} 
    ); 

});