2012-09-04 5 views
10

私は、グラフレイアウトを行うことができるJavascriptライブラリ/エンジンを探しています。 (そして、レイアウトと言うと、論理的に頂点の位置を決めることを意味します。)私が扱っているグラフはすべてm-aryツリーです。 Mは通常5または6以下であるが、場合によってはそれ以上に大きくなることもある。Javascriptグラフレイアウトエンジン

私は今Graphvizのノードプログラムを使用していますが、それは完全に機能します。問題は、Webアプリケーションを実行するときに、レイアウトが必要なたびにサーバーにリクエストを送信する必要があることです。私は、Javascriptで書かれたものをクライアント側ですばやく実行できるようにすることをお勧めします。レイアウト情報(相対的な配置など)を提供するだけです。私はそれをキャンバスに描く、あるいはSVGや何かを使う必要はありません。興味があるのはレイアウトです。

jQueryやRaphaelJSのようなライブラリの使用は私によっては問題ありません。私はそれを使って作業します。私はちょっとしたことでスピードを上げるためのものを探しています。

また、私は、レイアウトを行うためのアルゴリズムの素敵な記述を見つけることができたら私自身のことを書いてみたいと思います。しかし、私は本当にあまりにも多くの時間を費やしたくありません。私は今働く何かを持っているので、クライアント側でそれを得ることは単なるボーナスであり、必要ではありません。

答えて

8

は、彼らはいくつかの美しいグラフのレイアウトを持っている

http://d3js.org/

をD3(データ駆動型のドキュメント)を見てみましょう。

+0

非常に良い選択です。私はそれで少し遊んだと私は驚いている。これはおそらく私が使用することになるだろうが、誰かが提案をしているかどうか少し調べる予定です。 – GJK

2

http://sigmajs.org/は、グラフの視覚化のための特殊なjs libです。それはSVGの代わりにCanvasを使用します。

+0

sigma.jsの問題は、あなた自身でレイアウトを行う必要があるということです。 – echox

+0

ForceAtlas2レイアウトが利用可能であり、独自のレイアウトをコーディングすることができます。私はいくつかのレイアウトのためにそれをやりました。実際の問題は、Webブラウザ上でレイアウトを実行することです。コンパイルされた言語を使用するよりもはるかに時間がかかります。 – Seb

9

dagreをチェックしてくださいhttps://github.com/cpettitt/dagreこれはD3を使用し、Graphvizの(杉山)レイアウトをしています。

+0

私は直交レイアウトを行うJavascriptライブラリを探していて、これはmar kに近い最初のものです;)共有してくれてありがとう!! –

2

商業的シナリオでは、yFiles for HTMLライブラリを検討する価値があります。独自のビジュアライゼーションと編集機能もありますが、レイアウトはスタンドアロンで使用することもできます。また、作成時には、純粋なJavascriptライブラリを探している場合に最も柔軟性が高く、複雑なレイアウトアルゴリズムがあります。もちろん今日は利用可能なテクニックがあり、基本的には任意のライブラリ(GraphVizライブラリなど)をJavascript "blobs"にコンパイルすることができますが、実際のAPIは提供されず、ブラウザのコンソールアプリケーションに似ています。

オンラインで利用できるdemosの番号があり、yFilesのレイアウトでできることを示しています。この実装は、力指向アルゴリズム、階層(杉山スタイル)、直交、ツリー、円形、純粋なエッジルーティングアルゴリズムの高度で構成可能なバージョンを提供します。 This overviewは、使用可能なさまざまなモジュールを示し、ビューアとエディタの各部から独立して使用できます。

全開示:yFilesを作成する会社で働いていますが、私は雇用主ではありません。