現在、動的に作成されたデータに基づいて有向非巡回グラフ(最大 1000 ノード、最大 10000 エッジ)を描画する必要があるWeb アプリケーション (AngularJS)を構築しています。
1年以上にわたり、必要なレイアウトを計算し、スタイルを設定でき、ズームおよびパン可能でインタラクティブなグラフを描画するライブラリ/ツールを探しています(たとえば、マウスオーバーで子供を強調表示します)。
Graphvizは最良の結果を生み出すツールですが、Web サーバーで使用する準備ができていません (特に、OS を保証できず、使用したくないため)。
私はdagreを試してみましたが、それはd3 レンダリングです - とても気に入っていますが、2 つの大きな欠点があります。受け入れられなくなっています。
次に本当に説得力があるように見えたのはcytoscape.jsでした。これは、出力が非常に見栄えがよく、さらに大きなグラフを描画するのがかなり高速であるためです (そして、パフォーマンスの微調整が可能です)。しかし、その標準的なレイアウト (cose や幅優先など) では、必要な出力が生成されません。
私の現在の観点からは、2 つのチャンスがあります。
1) dagre.js でレイアウトを作成し、cytoscape.jsで結果を描画します (レイアウト: ' preset '、dagre レイアウトから計算されたノードの x と y を使用)。ただし、「化合物」/クラスターはそのようにはサポートされていません。
2) [viz.js] ( https://github.com/mdaines/viz.js ) (Graphviz のスクリプト化された Javascript バージョンであり、グラフの描画にはあまり適していません) を使用して、結果をプレーンな出力形式として計算し、再びこの結果を使用してcytoscape.jsで描画します。
今私の質問:
1) それを達成するための別のアイデアはありますか?
2) 私のアイデアが正しければ、チェーンを理想的にリンクする方法についてヒントをいただけますか?
(AngularJS -> REST バックエンド -> JSON からフロントエンド -> dagre または viz 用に JSON を再構築 -> レイアウトを計算 -> cytoscape に結果を入力 -> ブラウザでレンダリング?!?)クライアント自体ではなく、node.jsフロントエンドサーバー(これもパフォーマンスのため)?
ヒントやアイデアは大歓迎です。