[解決済み】JavaScriptによるグラフ可視化ライブラリ

質問

有向グラフを表すデータ構造を持っていて、それをHTMLページ上で動的にレンダリングしたいのです。 これらのグラフは通常数ノード、多いところでは10ノード程度なので、パフォーマンスはそれほど重要ではないだろうと思っている。理想的には、ユーザーがノードをドラッグして手動でレイアウトを調整できるように、jQueryでこれをフックできるようにしたいです。

注：チャート作成用のライブラリを探しているわけではありません。

どのように解決するのですか？

お探しのものをまとめてみました。 http://www.graphdracula.net

JavaScriptに有向グラフレイアウト、SVG、さらにノードをドラッグして移動することができます。まだ若干の調整が必要ですが、まったく問題なく使用できます。このように、JavaScriptのコードで簡単にノードとエッジを作成することができます。

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

以前紹介したRaphael JSライブラリ（graffleの例）と、ネットで見つけたフォースベースのグラフレイアウトアルゴリズムのコード（すべてオープンソース、MITライセンス）を使いました。もし何か指摘があったり、特定の機能が必要であれば、私が実装するかもしれませんので、お尋ねください。

他のプロジェクトも見てみるのもいいかもしれませんね! 以下、2つのメタ比較です。

• ソーシャルコンペア には豊富なライブラリのリストがあり、"Node / edge graph"の行でグラフ可視化のものをフィルタリングすることができます。

• DataVisualization.chはノード/グラフを含む多くのライブラリを評価しています。残念ながら直接のリンクはありませんので、"graph"でフィルタリングする必要があります。

以下は類似プロジェクトのリストです（ここですでに紹介されているものもあります）。

純粋なJavaScriptライブラリ

• vis.js は、多くの種類のネットワーク／エッジグラフに加え、タイムラインや2D／3Dチャートもサポートしています。オートレイアウト、オートクラスタリング、バネ性のある物理エンジン、モバイルフレンドリー、キーボードナビゲーション、階層型レイアウト、アニメーションなど。 MITライセンス 自己組織化ネットワークの研究を専門とするオランダの企業によって開発されました。

• Cytoscape.js - インタラクティブなグラフの解析と可視化、モバイル対応、jQueryの規約に準拠。NIHの助成金によって資金提供され、開発したのは をクリックします。 (参照 以下は彼の回答です。 ) を、複数の大学やその他の組織の協力を得て実現しました。

• JavaScript InfoVis Toolkit - インタラクティブで多目的のグラフ描画・レイアウトフレームワーク「Jit」。例えば ハイパーボリックツリー . Twitterのdatavizアーキテクトによって構築された ニコラス・ガルシア・ベルモンテ と Senchaに買収される 2010年

• D3.js Protovisの後継となる強力な多目的JSビジュアライゼーションライブラリ。をご覧ください。 力覚グラフ の例や、その他のグラフの例は ギャラリー .

• プロトライの JS可視化ライブラリは、JS、Python、R、MATLABのバインディングを持つD3.jsを使用しています。IPythonでのnexworkxの例をご覧ください。 こちら ヒューマンインタラクションの例 こちら , そして JSエンベデッドAPI .

• sigma.js 軽量かつ強力なグラフ描画ライブラリ

• jsPlumb インタラクティブな連結グラフを作成するためのjQueryプラグイン

• バネ性 - 力動的なグラフレイアウトアルゴリズム

• Processing.js John Resig氏によるProcessingライブラリのJavascriptへの移植版です。

• JS グラフイット - ドラッグ＆ドロップでボックスを直線で結ぶ。線は最小限の自動レイアウトで表示されます。

• RaphaelJSのグラッフル - 汎用的な多目的ベクター描画ライブラリのインタラクティブなグラフ例。RaphaelJSはノードを自動的にレイアウトすることはできませんので、そのためには別のライブラリが必要です。

• ジョイントJSコア - David DurmanのMPLライセンスによるオープンソースのダイアグラムライブラリです。静的なダイアグラムを作成することも、完全にインタラクティブなダイアグラムツールやアプリケーションビルダーを作成することも可能です。SVGをサポートしているブラウザで動作します。レイアウトアルゴリズムはコアパッケージに含まれていません。

• mxGraph 以前は商用だった HTML 5 ダイアグラム・ライブラリが Apache v2.0 で提供されるようになりました。 ドロー.io .

商用ライブラリ

• GoJS インタラクティブなグラフ描画・レイアウトライブラリ

• yHTML用ファイル 市販のグラフ描画・レイアウトライブラリ

• キーライン 商用JSネットワーク可視化ツールキット

• ZoomCharts 商用多目的可視化ライブラリ

• Syncfusion JavaScriptダイアグラム 描画と視覚化のための商用ダイアグラムライブラリ。

放棄されたライブラリ

• サイトスケープウェブ 埋め込み型JSネットワークビューア（新機能の予定はなく、Cytoscape.jsに引き継がれます。）

• キャンビズ JS レンダラ Graphvizグラフ用。 放棄された 2013年9月

• arbor.js 洗練されたグラフ描画、素敵な物理演算と目玉商品。2012年5月に放棄されました。いくつかの 準メインテナンス のフォークが存在します。

• jssvggraph SVGオブジェクトを使用するJavascriptライブラリとして実装された、最も単純な強制有向グラフレイアウトアルゴリズムです。2012年に放棄されました。

• jsdot クライアントサイドのグラフ描画アプリケーション。 2011年放棄 .

• プロトビス Graphical Toolkit for Visualization (JavaScript)。d3にリプレースされた。

• ムーホイール 接続と関係のためのインタラクティブなJS表現 (2008年)

• JSViz 2007年当時のグラフ可視化スクリプト

• ダガー JavaScript用グラフレイアウト

非Javascriptライブラリ

• グラフビズ 洗練されたグラフ可視化言語

  • GraphvizはEmscriptenを使用してJavascriptにコンパイルされています。 こちら と共に オンライン・インタラクティブ・デモはこちら

• フレア 美しく、パワフルなFlashベースのグラフ描画

• ノードボックス Pythonグラフ可視化