背景:私は現在、JavaScript を使用して、jQueryとBackbone.jsを使用して Web アプリケーションのクライアント側を開発しています(これらは提案者によって必要とされます)。
これは、グラフィカル モードでデータを視覚化および編集するためのアプリケーションです (主にデータを表すインタラクティブな図を使用)。
用語:上記のデータは複数のドキュメントの形式であり、それぞれにアイテムのリストが含まれています。
この質問の目的のために、アイテムを識別子、テキストによる説明、および他のドキュメント内のアイテムへのリンクで構成するとします。リンクは対称である必要があります (i1 -> i2存在する場合にのみi2 -> i1存在します)。
現在の目標:このフェーズでは、アプリケーションは 2 つのドキュメントを読み取り、両方のリストを並べて表示し、リンクに従って両方のドキュメント間の項目を結ぶ線を引くことができる必要があります。
これらの行は編集可能である必要があります。つまり、ユーザーは新しいリンクを作成したり、既存のリンクを削除したりできる必要があります(アイテム モデルの変更を反映)。
これらのドキュメントは、数十項目 (現実的なシナリオでは数百項目) など、やや長くなる可能性があります。もちろん、ページはスクロール可能で、ユーザーはすべてを見ることができます。
また、ユーザーの利便性のために、ビューをスケーリングするためのスライダーが必要です (ズームイン/アウト効果を可能にするため、ユーザーにはグローバルビューとローカルビューが与えられます。後者は編集に、前者は分析に適しています)。
さらに、ユーザーが特定のアイテムを非表示にできるようにする必要があります (アイテムに多くのリンクがあり、視覚的なごみを作成する場合に役立ちます)。
私がなんとかしたこと：
- データを読み取り、バックボーン モデルとコレクションにマップします。
- 両方のドキュメントを横に並べて表示 (バックボーン ビュー) し、アイテムを接続します。
- バックボーン モデルの変更を反映して、これらの接続の対話性を許可します (ドラッグ アンド ドロップで線を作成し、クリックして削除します)。
- 特定のアイテムを非表示にします。
- スケール効果。
jsPlumbに出くわした後、SVGを使用してこれを達成しました。
手元の問題:アプリケーションにはまだ調整が必要です (スケーリング効果の強調)。いずれにせよ、jsPlumb は快適に使用できることがわかりました。ただし、スライダーを使用する場合、レンダリングのパフォーマンスが少し不足しているようです (スライダーのステップが小さすぎて、イベントの発生が多すぎる可能性があります)。
提案者は、この種のデータを表現するために、代わりにサンキー ダイアグラムを試すことを提案しました。彼らはまた、 Raphaël.jsに基づいて、tamcによる Sankeyを試すことを提案しました。
もちろん、視覚的要因も寄与しています。
私の質問:このライブラリは Backbone と良好な互換性がありますか? おそらく、結果の SVG 要素をバックボーン ビューの要素として使用する場合。
また、この 2 つのいずれかで、レンダリング パフォーマンスが他よりも大幅に優れているものはありますか?
最後に、このシナリオにより適切で、アプリケーションを書き直す価値のある他のライブラリはありますか?
