3

jsPlumbを使用して、ユーザーがグラフを作成できるようにしています。ユーザーがこれらの要素をドラッグできるようにするため、エンドポイントごとにアンカーのコレクションを使用して、接続が確立されたときにjsPlumbがそのコレクションから「最適な」アンカーを選択できるようにします。私が抱えている問題は、特定のエンドポイントから最大12の接続が発生する可能性があるため、多くの人が同じ「最良の」アンカーを選択することになると、これらの接続が視覚的に混乱し、グラフに輻輳が発生することです。 。この問題を解決するために、jsPlumbに、2つの接続がエンドポイントで同じアンカーを共有することを制限するように指示したいと思います。

私が達成したいことを視覚化する最も簡単な方法は、このデモです： https ://jsplumbtoolkit.com/community/demo/dynamicAnchors/index.html

箱から出して、このデモの接続は重複しません。

ソースコードを読むと、「ソース」のアンカーセットと「ターゲット」のアンカーセットがあり、接続は最初のアンカーセットから2番目のアンカーセットまで排他的に行われていることがわかります。ただし、前述したように、エンドポイントとの間で接続できる接続の種類は最大12種類あるため、それぞれに一意のアンカーのセットを指定する必要はありません。アンカーの各セットは他のアンカーのセットと交差できなかったため、エンドポイントのエッジに沿って潜在的な各アンカーの間に残すことができる間隔の量が制限されます。

接続が同じアンカーを共有したくないことをjsPlumbに伝える方法はありますか？

4

2 に答える 2

4 
jsPlumb.bind('connection',function(info){
 var con=info.connection;
 var arr=jsPlumb.select({source:con.sourceId,target:con.targetId});
 if(arr.length>1){
    jsPlumb.detach(con);
 }
});

jsPlumb の更新された API を使用した簡潔なもの。

同じソースとターゲットを持つ別の接続が存在するかどうかを確認し、存在する場合は、新しく作成された接続を切り離します。(jsPlumb バージョン 1.5.5 - 1.6.1)

アップデート：

2.4 以降のバージョンでは、jsPlumb.detach の代わりに jsPlumb.deleteConnection を使用します。

于 2014-06-11T17:49:15.220 に答える
3

接続で同じアンカーを共有したくないことを jsPlumb に伝える方法はありますか?

JS Fiddle を使用したデモ

JQuery

jsPlumb.bind("jsPlumbConnection", function (CurrentConnection) {
    var DuplicateCount = 0;
    var allConn = jsPlumb.getAllConnections();
    var length = allConn["green dot"].length;
    for (var i = 0; i < length; i++) {
        if (allConn["green dot"][i].targetId ==               
                                         CurrentConnection.connection.targetId) {
            DuplicateCount = DuplicateCount + 1;
        }
    }
    if (DuplicateCount > 1) {
        jsPlumb.detach(CurrentConnection.connection);
        return;
    } 
});

ピンクとグリーンをつなぐことができます。ピンクとピンクとグリーンとピンクとグリーンとグリーンは許可されていません。

于 2013-02-26T15:29:51.683 に答える