web-dev-qa-db-ja.com

純粋なJavaScript Graphvizと同等

GraphVizが生成できる方向性フロー図の純粋なJavascriptベースの実装を知っている人はいますか?私はきれいな視覚的な出力には興味がありませんが、ツリーではなくグラフを扱うときに交差するエッジの数を最小限に抑えるように最適化されたベジェ線のレイアウトとともに、各ノードの最大深度を計算する計算情報の。このコードをブラウザ内で実行したいと思います。 Graphvizを拡張機能としてNodeサーバー、またはpopen()に簡単に埋め込むことができ、.dot フォーマット。

参考のために、ここに典型的なGraphVizの出力を示します。要素がどのようにスタックされ、間隔が空いていて、ノード間を交差したり(非常に頻繁に)通過したりせずに、接続線がノード間を移動できることに注意してください。

enter image description here

136
Armentage

.dotキャンバスレンダラーのこの純粋なJavaScript実装を見てください。

http://ushiroad.com/jsviz/

ライブラリは文書化されていません-著者は間違いなくそれを公表して文書化すべきです(少なくとも彼にそれをgithubに載せるよう提案するために彼に連絡します)。

更新:コードはgithubにプッシュされました: https://github.com/gyuque/livizjs

更新(2013年2月14日):別の競合が発生しました!このテーマに興味がある人は、間違いなくViz.jsの サンプルページ および githubリポジトリ を見てください。

80
Greg Sadetsky

遠くを探して、最終的に答えを見つけました。

解決策は、誰かがllvm + emscriptenを使用してGraphvizをJavascriptにクロスコンパイルしたことです。リンクは次のとおりです。

http://viz-js.com/

ソースは次の場所にあります: https://github.com/mdaines/viz.js

そして、単純にウェブページを使用するには:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");
35
Zachary Vorhies

すべてのオプションを確認した後、jsvizとgraphviz.jsに基づいてviz.js( https://github.com/mdaines/viz.js/ )を見つけ、実際にAPIを使用できるようにしましたウェブページ、および理解するのに十分な例。

18
Jason Siefken

「PDFリーダー」の例で行ったように、graphvizをjavascriptに変換してみることができます。 https://github.com/kripken/emscripten

11
pedroteixeira

これは既製のgraphvizの置き換えではありませんが、 d3.js は、指定されたデータからさまざまなレイアウトを実行できるライブラリであり、graphvizを実装するための優れたプラットフォームになります。

ここに 強制指向レイアウトの例 があり、これはgraphvizの機能の1つの形式です。

レイアウトに関するスピーチ とてつもなくすごい インタラクティブなスライド です。

プロジェクトを理解するために、 チュートリアル は非常に優れています。

8
w00t

以下は、Emscriptenを使用して行われたGraphvizからJavascriptへのクロスコンパイルです。

https://github.com/bpartridge/graphviz.js

5
Paul Dixon