問題タブ [jsplumb]

アップデート - 1

これが私の JSFiddleです。

この例では。DOM ロード時に最初の 2 つの div を接続しました。

このコード行で

JSPlumb

コネクタ スタイルを渡しています。

クエリ- ソース エンドポイントとターゲット エンドポイントを Green および Ping として表示したい。現在、青く表示されています。

オリジナル

私は最近、他の開発者が未完成のままにしていた開発を引き継ぎました。プロジェクトでは、2 つの要素間のコネクタを描画できる必要があります。そのために、元の開発者はjsPlumbを使用しました。コネクタを手動で作成すると、ライブラリは正常に動作し、結果が生成されます。しかし、今私がやりたいことは、コネクタを動的に作成することです。jsPlumb のドキュメントを読んで試してみましたが、必要な結果が得られません。

これは、手動で作成したときの様子です（ターゲット要素の色と矢印に注意してください）

しかし、自動的に作成すると、この色と矢印が得られません。これは、テスト用に作成したフィドルです。私がやっていることはjsPlumb.connect();、パラメーターを呼び出して渡すことです。

誰が間違いを指摘できますか？

よろしく

ジェハンゼブ・マリク

ここにJSフィドルがあります

このドキュメントでは、コネクタを持つ2つのコンテナがあります。私の質問は、ボタンをクリックすると緑色とピンク色のドットが表示されるようなコネクタを持つ新しいコンテナを追加するにはどうすればよいですか。

HTML

JQuery

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

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

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

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

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

これはJS Fiddleの私のデモです

HTML

JQuery

クエリ - JS-Plumb の同じ div で接続の確立を制限するには?

背景:私は現在、JavaScript を使用して、jQueryとBackbone.jsを使用して Web アプリケーションのクライアント側を開発しています(これらは提案者によって必要とされます)。
これは、グラフィカル モードでデータを視覚化および編集するためのアプリケーションです (主にデータを表すインタラクティブな図を使用)。

用語:上記のデータは複数のドキュメントの形式であり、それぞれにアイテムのリストが含まれています。
この質問の目的のために、アイテムを識別子、テキストによる説明、および他のドキュメント内のアイテムへのリンクで構成するとします。リンクは対称である必要があります (i1 -> i2存在する場合にのみi2 -> i1存在します)。

現在の目標:このフェーズでは、アプリケーションは 2 つのドキュメントを読み取り、両方のリストを並べて表示し、リンクに従って両方のドキュメント間の項目を結ぶ線を引くことができる必要があります。
これらの行は編集可能である必要があります。つまり、ユーザーは新しいリンクを作成したり、既存のリンクを削除したりできる必要があります(アイテム モデルの変更を反映)。

これらのドキュメントは、数十項目 (現実的なシナリオでは数百項目) など、やや長くなる可能性があります。もちろん、ページはスクロール可能で、ユーザーはすべてを見ることができます。

また、ユーザーの利便性のために、ビューをスケーリングするためのスライダーが必要です (ズームイン/アウト効果を可能にするため、ユーザーにはグローバルビューとローカルビューが与えられます。後者は編集に、前者は分析に適しています)。
さらに、ユーザーが特定のアイテムを非表示にできるようにする必要があります (アイテムに多くのリンクがあり、視覚的なごみを作成する場合に役立ちます)。

私がなんとかしたこと：

• データを読み取り、バックボーン モデルとコレクションにマップします。
• 両方のドキュメントを横に並べて表示 (バックボーン ビュー) し、アイテムを接続します。
• バックボーン モデルの変更を反映して、これらの接続の対話性を許可します (ドラッグ アンド ドロップで線を作成し、クリックして削除します)。
• 特定のアイテムを非表示にします。
• スケール効果。

jsPlumbに出くわした後、SVGを使用してこれを達成しました。

手元の問題:アプリケーションにはまだ調整が必要です (スケーリング効果の強調)。いずれにせよ、jsPlumb は快適に使用できることがわかりました。ただし、スライダーを使用する場合、レンダリングのパフォーマンスが少し不足しているようです (スライダーのステップが小さすぎて、イベントの発生が多すぎる可能性があります)。

提案者は、この種のデータを表現するために、代わりにサンキー ダイアグラムを試すことを提案しました。彼らはまた、 Raphaël.jsに基づいて、tamcによる Sankeyを試すことを提案しました。 もちろん、視覚的要因も寄与しています。

私の質問:このライブラリは Backbone と良好な互換性がありますか? おそらく、結果の SVG 要素をバックボーン ビューの要素として使用する場合。
また、この 2 つのいずれかで、レンダリング パフォーマンスが他よりも大幅に優れているものはありますか?

最後に、このシナリオにより適切で、アプリケーションを書き直す価値のある他のライブラリはありますか?

これは私のJSFiddleです

クエリ-IDA1とBの間の接続を確立しようとすると、接続のピンクの線がDivBから離れて表示されます。強調表示されたピンクの線の下がDivBから離れています。これが問題です。

JQuery

HTML

jsplumb接続をブラウザの上部にドラッグするときにスクロールを作成するにはどうすればよいですか？ネットを検索しましたが、巻物を作成するための解決策が見つかりませんでした。

ユーザーがドラッグ可能なボックスを追加して jsPlumb に接続できるようにする「キャンバス」があります。ある時点で、それらのボックスの 1 つを削除できるようにしたいと考えています。これを処理するために、まずすべての接続を切り離し、ターゲット要素からエンドポイントを削除します。これは正常に機能します。

次に、実際の DOM 要素を削除します。

この時点で、jsPlumb がおかしくなり始め、残りの要素をドラッグできなくなります。

ボックスのサイズを変更して新しい接続を作成し続けることはできますが、要素をドラッグすると失敗し続け、上記のエラーが発生します。

私が間違っていることはありますか？言い換えれば、「ドラッグ可能な」環境で jsPlumb 要素を削除するより適切な方法はありますか?

jsPlumb を使用してワークフロー デザイナーを作成することに興味があります。それはすべて jQuery のように見えるので、接続への変更を保持し、ワークフロー定義に対応する XML をデザイン キャンバスに書き出すために配管 (しゃれを許してください) を作成する必要があると思います。

質問 #1 - jsPlumb 用の .NET ライブラリはありますか? 質問 2 - オーチャード CMS の運営委員会でこれが行われているのを見ました。Orachd チームはすでにこれを行っていますか? 1.7 を待ってソース コードを確認する必要がありますか?

![ jsplumbソースをターゲットと一緒に移動したいのは、これらの jsplumb を動的に描画するためです。各ソースを移動するときに、ターゲットも一緒に移動する必要がありますか?. 1

画像をダウンロードして、 Jsplumbの各ソースをターゲットと一緒に移動する方法があれば助けてください 。*