JsPlumbでエッジを使った接続を構築するには？

Question

JsPlumb接続を中間に分割し、次の画像のように複数のエンドポイントに接続するにはどうすればよいですか？

A：

B：つの接続を持つ2つのエンドポイントを接続

C：つの接続と3つのエンドポイントを接続する：

つの接続を持つ2つの端点を結びます

編集：FlowChartオプションを使用すると、小さな点である奇妙なバグが発生します。下記の画像をご覧ください。スクリプトでjsfiddleへのリンク以下

Answer 1

。すべての青いブロックはドラッグ可能なので、ブロックの位置と接続の動作を試すことができます。

そして、私は非常に大きい答えてごめんなさい;）

A：

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

：1つの接続で2つのエンドポイントを接続します

B：1つの接続で2つのエンドポイントを接続する：

jsPlumbルール：2つのウィンドウ間に1つの接続。したがって、最後にいくつかの接続を分割する必要がある場合は、1つのウィジェットのソースとなるプロキシポイントを作成し、他のウィンドウに対して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：1つの接続で3つのエンドポイントを接続する：

それは '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"} 
    ); 

});