jsPlumbのウィンドウ/ダイアログをランダムに配置

Question

jsPlumbで作成されたすべてのダイアログ/ウィンドウをランダムに配置する方法はありますか？

私はこれらのダイアログで表現したい項目がたくさんありますが、問題を解決するには画面に配置する必要がありますが、項目がたくさんあるので退屈な仕事になるので、このアイテムのリストは、拡大/縮小する可能性があります。

#window3 { top:2em; left:2em; } 
#window4 { top:2em; left:32em; } 

ランダムに画面上でこれらのダイアログを配置する方法はありますが、あると：jsPlumbのデモを見てみると

は、ダイアログは「トップ」と「左」のCSSプロパティを使用して、特定の位置を与えられていますそれらの間の距離？画面上にダイアログを配置する方法があれば、矢印とダイアログの間の交差が最小限に抑えられます。

編集：

最善の解決策ではない正確に、しかしかなりいい1：

http://forums.lndb.info/showthread.php?tid=43

https://github.com/lndb/jsPlumb_Liviz.js（2 demoesがここで提供されている）

http://lndb.info/light_novel/diagram/Hidan_no_Aria

Answer 1

Iの場合質問を正しく理解していると、あなたは最初のポジションについて心配しています（コンポーネントのサイズとコンポーネントの量に関係なく）一般的なソリューションを探しています。懸念の

分離： 初期部品位置決めのタスクはjsPlumpから独立して考えることができます。

私の例については、私は、次の要件とアルゴリズムを選択しています：

• 位置コンポーネントが画面上で均等に配置され、ビューポートの幅を水平の包含として使用する

• コンポーネントの余白sh調整可能でウルドCSSを通じて

• コンポーネントは、私は相対的な位置と、Aのコンポーネントを配布することは容易であるという事実を利用してる私の解決策では

jsPlumbの機能を維持するためにドラッグ可能なままにしなければなりませんグリッド。含むDIV初期クラス「初期」を与えて、私は部品のために、以下のCSSを定義しています：DOM要素がグリッドとして表示されている右後

#demo.initial .component.window { 
    position:relative; 
    float:left; 
    margin:60px; 
} 

を、私は相対から自分のCSSの位置を変更しています〜絶対（コンテナの「初期」クラスを削除し、そのスタイル属性内でコンポーネントのオフセットを適用することによって）

$(document).ready(function() { 
    $(".component.window").each(function(i) { 
     var left = $(this).offset().left; 
     var top = $(this).offset().top; 
     $(this).css({ 
      left: left, 
      top: top 
     }); 
    }); 
    $("#demo.initial").removeClass("initial"); 
}); 

はここlink to my jsbin

編集です：ここでは部品のlink to jsfiddle

初期位置がターゲットフレームの幅によって異なりますです。

Answer 2

第1の解決策は、このライブラリを使用した：https://github.com/lndb/jsPlumb_Liviz.js

これらの要素の位置決めのための Liviz.js有する要素を接続jsPlumbライブラリーの組合せ。

つまり、UI（接続するdiv）にjsPlumbを使用し、これらの要素（divs）を配置するには Liviz.jsを使用します。

私が使用してしまうた別の解決策 - JavaScriptライブラリ「をdagreレンダリング有向グラフ」：https://github.com/cpettitt/dagre

Dagreは、クライアントに送ら グラフをレイアウトすることが容易になりますJavaScriptライブラリです-側。このライブラリの

キーの優先順位は以下のとおりです。

完全にクライアント側計算されたレイアウト。クライアント側のレイアウトが 要件でない場合は、graphvizのような機能が豊富で機能が豊富な があります。

速度。 Dagreは中規模のグラフを素早く描画できなければならず、 は、より最適なアルゴリズムを採用することができないか、または という正確なアルゴリズムを潜在的に犠牲にしなければなりません。

レンダリング不可知論者。 Dagreは、ノードの大きさなどのグラフを作成するために非常に基本的な情報しか必要としません。あなたは好きな技術を使って グラフをレンダリングすることは自由です。我々の の例ではD3を使用しており、CSSと SVGを使用してレンダリングする予定がある場合は、それを強くお勧めします。