有向グラフを表すデータ構造があり、それをHTMLページに動的にレンダリングしたいと考えています。これらのグラフは通常、ほんの数ノードであり、おそらく非常に上位のノードは10になるため、パフォーマンスはそれほど重要ではないと思います。理想的には、ユーザーがノードをドラッグしてレイアウトを手動で微調整できるように、jQueryでフックできるようにしたいと考えています。
注:グラフ作成ライブラリは探していません。
有向グラフを表すデータ構造があり、それをHTMLページに動的にレンダリングしたいと考えています。これらのグラフは通常、ほんの数ノードであり、おそらく非常に上位のノードは10になるため、パフォーマンスはそれほど重要ではないと思います。理想的には、ユーザーがノードをドラッグしてレイアウトを手動で微調整できるように、jQueryでフックできるようにしたいと考えています。
注:グラフ作成ライブラリは探していません。
回答:
私はあなたが探しているかもしれないものをまとめました:http://www.graphdracula.net
これは、有向グラフレイアウト、SVGを備えたJavaScriptであり、ノードをドラッグすることもできます。まだ微調整が必要ですが、完全に使用できます。次のようなJavaScriptコードでノードとエッジを簡単に作成できます。
var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");
前述のRaphael JSライブラリ(グラフの例)に加えて、ネット上で見つけたフォースベースのグラフレイアウトアルゴリズム(すべてのオープンソース、MITライセンス)のコードを使用しました。コメントや機能が必要な場合は、実装させていただきますので、お気軽にお問い合わせください。
他のプロジェクトも見てみたいかもしれません!以下は2つのメタ比較です。
SocialCompareには、広範なライブラリのリストがあり、「ノード/エッジグラフ」の行は、グラフの視覚化のものをフィルタリングします。
DataVisualization.chは、ノード/グラフを含む多くのライブラリを評価しています。残念ながら、直接のリンクはないため、「グラフ」でフィルタリングする必要があります。
ここに同様のプロジェクトのリストがあります(いくつかはすでにここで言及されています):
vis.jsは、多くのタイプのネットワーク/エッジグラフに加えて、タイムラインと2D / 3Dチャートをサポートしています。自動レイアウト、自動クラスタリング、弾力性のある物理エンジン、モバイルフレンドリー、キーボードナビゲーション、階層レイアウト、アニメーションなど。自己組織化ネットワークの研究を専門とするオランダの会社がMITにライセンスを供与し、開発しました。
Cytoscape.js -jQueryの規則に従って、モバイルサポートによるインタラクティブなグラフ分析と視覚化。NIHの助成金を通じて資金が提供され、いくつかの大学や他の組織の支援を受けて@maxkfranz(彼の回答を参照)によって開発されました。
JavaScript InfoVis Toolkit -Jit、インタラクティブな多目的グラフ描画およびレイアウトフレームワーク。たとえば、双曲線ツリーを参照してください。TwitterのDATAVIZの建築家によって建てられたニコラス・ガルシアベルモンテと煎茶で買った 2010年。
D3.js Protovisの後継である強力な多目的JS視覚化ライブラリ。ギャラリーで、力が作用するグラフの例と他のグラフの例をご覧ください。
Plotlyの JS可視化ライブラリは、JS、Python、R、MATLABバインディングでD3.jsを使用します。こちらのIPythonのnexworkxの例、こちらの人間の相互作用の例、JS Embed APIをご覧ください。
sigma.js軽量で強力なグラフ描画ライブラリ
インタラクティブな接続グラフを作成するためのjsPlumb jQueryプラグイン
Springy-力指向のグラフレイアウトアルゴリズム
John ResigによるProcessingライブラリのProcessing.js Javascriptポート
JS Graph It-直線で結ばれたボックスをドラッグアンドドロップします。ラインの最小限の自動レイアウト。
RaphaelJSのGraffle-一般的な多目的ベクター描画ライブラリのインタラクティブなグラフの例。RaphaelJSはノードを自動的にレイアウトできません。そのためには別のライブラリが必要です。
JointJS Core -David DurmanのMPLライセンスのオープンソースダイアグラムライブラリ。静的図または完全にインタラクティブな図作成ツールとアプリケーションビルダーを作成するために使用できます。SVGをサポートするブラウザで動作します。コアパッケージに含まれていないレイアウトアルゴリズム
mxGraph以前は商用のHTML 5ダイアグラムライブラリで、Apache v2.0で利用可能になりました。mxGraphは、draw.ioで使用される基本ライブラリです。
GoJS Interactiveグラフ描画およびレイアウトライブラリ
KeyLines商用JSネットワーク可視化ツールキット
ZoomCharts商用多目的視覚化ライブラリ
Syncfusion JavaScriptダイアグラム描画と視覚化のための商用ダイアグラムライブラリ。
Cytoscape Web Embeddable JS Networkビューア(新機能は計画されていません。Cytoscape.jsが成功しました)
arbor.js素晴らしい物理学と目の保養を備えた洗練されたグラフ。2012年5月に廃止されました。いくつかのセミメンテナンスフォークが存在します。
jssvggraph「SVGオブジェクトを使用するJavascriptライブラリとして実装された、最も単純なフォース有向グラフレイアウトアルゴリズム」。2012年に放棄されました。
Protovis Graphical Toolkit for Visualization(JavaScript)。d3に置き換えられました。
Moo Wheel Interactive JSによる接続と関係の表現(2008)
JSViz 2007時代のグラフ視覚化スクリプト
JavaScriptのdagreグラフレイアウト
免責事項:私はCytoscape.jsの開発者です
Cytoscape.jsは、HTML5グラフ視覚化ライブラリです。APIは洗練されており、jQueryの規則に準拠しています。
cy.elements("node[weight >= 50].someClass")
期待どおりに動作します)、cy.nodes().unselect().trigger("mycustomevent")
、グラフを使用した本格的なWebアプリケーションの作成を検討している場合は、少なくともCytoscape.jsを検討する必要があります。これは無料でオープンソースです。
JsVISは非常に優れていましたが、グラフが大きくなると遅くなり、2007年以降廃止されました。
prefuseは、Javaでリッチなインタラクティブなデータ視覚化を作成するためのソフトウェアツールのセットです。flare は、Adobe Flash Playerで実行されるビジュアライゼーションを作成するためのActionScriptライブラリで、2012年から廃止されています。
商業的なシナリオでは、深刻な競争相手は確かにHTML用のyFilesです。
それは提供しています:
以下は、要求された機能のほとんどを示すサンプルレンダリングです。
完全な開示:私はyWorksで働いていますが、Stackoverflowでは雇用主の代表ではありません。