21

接続可能なアイテムまたは指定された要素 (例: 'item' クラスの要素) を交差させないように jsPlumb フローチャート コネクタを作成することは可能ですか?

デフォルトのフローチャートの動作:

ここに画像の説明を入力

望ましい結果:

ここに画像の説明を入力

これが私が試したことです：

http://jsfiddle.net/CcfTD/1/

明確にするために編集

HTML

 <div id="root">
        <div class="item" id="item1">Item 1</div>
        <div class="item" id="item2">Item 2</div>
        <div class="item" id="item3">Item 3</div>
        <div class="item" id="item4">Item 4</div>
        <div class="item" id="item5">Item 5</div>
  </div>

JS

   jsPlumb.connect({
    source: $('#item2'),
    target: $('#item7'),
    anchors: [ "Continuous" ],
    connector:[ "Flowchart" ],
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    }
});

基本的に、jsPlumb エンジン (SVG またはキャンバス) に関連する DOM 要素を認識させ、オブジェクト回避スキームを持たせる

http://jsfiddle.net/adardesign/2ZFFc/

4

4 に答える 4

6

私は実際にこれを行うための適切な方法を見つけようとしていますが(それがあなたの質問につながりました)。その間、jsPlumbを希望どおりに動作させるために使用しているソリューションがあります。

基本的に、中間ノードとして機能するには、高さ/幅がゼロの div を追加する必要があります。次に、実際のアイテム間で直接接続するのではなく、そのノードとの間で接続を作成します。

この例を提供するために、jsfiddle (更新されたリンク)を変更しました。

注意すべき重要な点は、座標を使用してアンカーの配置を設定する機能と、2 つの異なるエンドポイント形状を使用する機能です。さらに、この例ではアンカーから最初のターンまでのデフォルトの長さが長すぎるため、スタブ引数を使用して制御できます。

以下は、コメント付きの関連する変更です。

HTML 

<div id="root">
    <div class="item" id="item1">Item 1</div>
    <div class="item" id="item2">Item 2</div>
    <div class="item" id="item3">Item 3</div>
    <div class="item" id="item4">Item 4</div>
    <div class="item" id="item5">Item 5</div>
    <div class="item" id="item6">Item 6</div>
    <div class="item" id="item7">Item 7</div>
    <div class="node" id="8-12"></div>            <!-- Midpoint -->
    <div class="item" id="item8">Item 8</div>
    <div class="item" id="item9">Item 9</div>
    <div class="item" id="item10">Item 10</div>
    <div class="item" id="item11">Item 11</div>
    <div class="item" id="item12">Item 12</div>
    <div class="item" id="item13">Item 13</div>
    <div class="item" id="item14">Item 14</div>
</div>

CSS 

.node {
    position: absolute;
    height: 0px;
    width: 0px;
    visibility: hidden;

    /* change these to place the midpoint properly */
    left: 285px;
    top: 160px;
}

JS 

//connection from item8 to midpoint(8-12)
jsPlumb.connect({
    source: $('#item8'),
    target: $('#8-12'),
    connector:[ "Flowchart", {stub:5} ], //<== set stub length to be
                                         //    as short as you need it
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    },
    anchors:[ [0,0.5,-1,0],[0.5,0,0,-1] ], //<== connection position/direction
    endpoints:[ ["Dot", {radius:2}],["Blank"] ] //<== Blank connector at end
});

//connection from midpoint(8-12) to item12
jsPlumb.connect({
    source: $('#8-12'),
    target: $('#item12'),
    connector:[ "Flowchart", {stub:5} ], //<== set stub length to be
                                         //    as short as you need it
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    },
    anchors:[ [0,0.5,-1,0],[0.5,0,0,-1] ], //<== connection position/direction
    endpoints:[ ["Blank"],["Dot", {radius:2}] ] //<== Blank connector at start
});
于 2013-02-01T16:31:56.887 に答える
2

動的に生成されたダイアグラムの接続が要素と交差するという同様の問題がありました。

私にとってうまくいったのは、フローチャート接続の「中間点」引数を指定することでした。たぶん、これはあなたの場合にも役立ちます。

スタブ引数は配列も受け入れます (ドキュメントにはありません)。私はちょうど設定しました：

jsPlumb.Defaults.Connector = [ "Flowchart", { stub: [10, 50], midpoint: 0.0001 } ];

お役に立てれば！

于 2014-01-08T14:33:49.800 に答える
2

実際、特に動的データを扱っている場合、問題の解決策はより深いものになります。

数時間掘り下げた後、私はついに「亀裂」を見つけました。きれいな解決策ではなく、亀裂です。

フローチャート コネクタに対してこの変更を行ったところです。また、他のコネクタについてはまったく詳しくなく、使用したことがありません。

midx と midy と初期スタブ (完全なソリューションで使用する必要がありますが、私はそれらを放棄しました) などのさまざまなことを検討した後、最も簡単なことは、connectors-flowchart.js ファイルで addSegment 関数を検索することです。そこにセグメントが追加されます。

現在のセグメントを追加する（セグメント配列にプッシュする）前に、それが要素のいずれかと交差するかどうかを確認し、いくつかの中間点を計算するだけです（したがって、追加のセグメントを追加し、最初のセグメントを分割します）。交差した要素を迂回します。

詳細が必要な場合は、喜んで共有します。

于 2013-12-31T12:11:32.130 に答える