web-dev-qa-db-ja.com

jsPlumb：フローチャートコネクタで要素の交差を回避する方法は？

JsPlumbフローチャートコネクタが接続可能なアイテムまたは指定された要素（例：「item」クラスの要素）を交差させないようにすることは可能ですか？

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

enter image description here

望ましい結果：

enter image description here

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

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またはcanvas）に関連するDOM要素を認識させ、オブジェクト回避スキームを持たせるため

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

javascriptcanvassvgflowchartjsplumb
20
Dmitry Druganov

私は実際にこれを行うための適切な方法を見つけようとしていますが（それがあなたの質問につながりました）。その間、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
});
5
Jeff

動的に生成された図の接続が要素と交差するという、同様の問題が発生しました。

私にとってうまくいったのは、フローチャート接続の"midpoint"引数を指定することでした。多分これはあなたの場合にも役立つでしょう。

stub引数は、配列も受け入れます（ドキュメントにはありません）。私はちょうど設定しました：

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

お役に立てれば！

2
Heiko

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

数時間掘った後、私はついに「ひび」を見つけました。これはきれいな解決策ではなく、ひびです。

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

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

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

詳細が必要な場合は、喜んで共有させていただきます。

2
Diana

上記のオプションを試してみましたが、中間ノードを追加せずに単純なソリューションが必要な場合は、次の方法でうまくいきました。

connector: ["Flowchart", { anchors: ["Bottom", "Top"] }]

接続にこれらのパラメータを追加します。

0
dessskris