4

現在、動的に作成されたデータに基づいて有向非巡回グラフ(最大 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フロントエンドサーバー(これもパフォーマンスのため)?

ヒントやアイデアは大歓迎です。

4

2 に答える 2

1

複合レイアウトとしての Dagre に不満があるようですね。Dagre の作成者は複合サポートを実装していないため、これは理にかなっています。Dagre は Cytoscape.js とは別のものですが、Cytoscape.js で使用できます。Dagre の作成者は、自分自身の新機能でライブラリを更新することはもうないと述べていることに注意してください。したがって、オプションは次のとおりです。

(1) CoSE や Cola など、実際には複合ノード用に設計された別の Cytoscape.js レイアウトを使用します。

(2) ニーズに合った Cytoscape.js の独自のレイアウトを作成します: http://js.cytoscape.org/#extensions/layouts

(3) 複合ノードを認識できるようにDagreを適応させ、作成者にプル リクエストを送信し ます。

現在、複合グラフ レイアウトは開かれた研究領域です。そのため、どのライブラリでも複合グラフ レイアウトを完全にサポートする多くのレイアウトを見つけるのは難しいでしょう。Cytoscape.js にはいくつかの複合サポート レイアウトがあり、別の動作が必要な場合は自由にフォークできます。また、2.5 ブランチにはアルゴリズムが改善された CoSE2 があることにも注意してください。

于 2015-08-31T17:22:12.847 に答える
0

Cytoscape.js は dagre レイアウトを使用できます。詳細については、サイトスケープのドキュメントを参照してください。ただし、ノードとエッジをグラフに追加してから、dagre レイアウトを実行するだけです。そうすれば、個別の dagre.js からのノードの位置に基づいて、すべてのノードを手動で配置する必要がなくなります。

于 2015-08-27T15:49:25.613 に答える