14

私は、プログラミング言語のモジュール システムと Makefile に表示される依存関係グラフを検査できるブラウザー ベースのツールを作成しようとしています。

描画を行う視覚化フレームワークを探しています。

要件は、ツールキットができることです。

  • ノードにラベルを付ける（そしてできればエッジ）
  • 無限のスペースがある場合（スクロールバーは問題ありません）、グラフを適切なサイズに自動的に配置します（適切な寸法を推測する必要はありません）
  • 乱雑に見えないようにグラフを適切にレイアウトする
  • <= 5000 ノードで問題ありません
  • JS のみで実行 (Flash やデスクトップ アプリは不可)

必要に応じて、ノードを簡単に移動したり、グラフの一部を強調表示または非表示にしたりして、全体像を把握しやすくするとよいでしょう。

どのバッキングが使用されているかは大した問題ではありません (SVG、キャンバス、すべて問題ありません)。

これまでにかなりの数のライブラリを見てきましたが (特にJavaScript のグラフ視覚化ライブラリから)、適切なものはまだ見つかりませんでした:

  • d3は優れていますが、それが提供する唯一のノード グラフは、リアルタイムの物理に焦点を当てたフォース グラフです。ロードしたら、物理エンジンが安定するまで待って監視する必要があります。アニメーションもフォースも不要で、すぐにグラフを表示したい。
  • GraphDraculaの例は、私が探しているものとほとんど同じですが、すでに 70 ノードと 400 エッジでは、描画パフォーマンスが非常に悪くなります。また、ドキュメントもほとんどありません(35 行のコード例です)。

私の要件を満たすものを知っていますか？ありがとう！

4

2 に答える 2

2

商用シナリオでは、yFiles for HTMLを検討することをお勧めします。

要件に関して、次のことができます。

  • ノードとエッジに任意の数のラベルを追加
  • 事実上無限のスクロール/パン/ズーム領域を提供
  • さまざまな自動レイアウト アルゴリズムを使用して、グラフを自動的にレイアウトします。依存関係グラフの場合、Hierarchic Layouterが非常に適しています
  • 多数のノードを持つデスクトップ ブラウザーでうまく動作します。ただし、視覚的な複雑さとグラフ構造によっては、5000 個の要素は、今日のブラウザーの実装では難しいかもしれません。
  • 依存関係のない純粋な Javascript ライブラリです。
  • メインのバックエンドとして SVG を使用しますが、Canvas も活用できます
  • ライブラリは十分に文書化されており、その複雑さを考えると必要です

上記の機能の一部が実際に動作している様子を示すスクリーンショットを次に示します。レイアウトは自動的に計算されました。

ここに画像の説明を入力

免責事項：私はライブラリを作成する会社で働いています。SO/SE では、私は雇用主を代表していません。これは私自身の投稿です。

于 2014-01-24T15:31:30.680 に答える