有向グラフを表すデータ構造があり、それを HTML ページで動的にレンダリングしたいと考えています。これらのグラフは通常、数個のノードで構成され、最大でも 10 個程度なので、パフォーマンスはそれほど問題にならないと思います。理想的には、jQuery でフックして、ユーザーがノードをドラッグして手動でレイアウトを微調整できるようにしたいと考えています。
注: チャート作成ライブラリを探しているわけではありません。
ベストアンサー1
あなたが探しているかもしれないものをまとめてみました: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 ライブラリ (graffle の例) と、ネットで見つけた力に基づくグラフ レイアウト アルゴリズムのコード (すべてオープン ソース、MIT ライセンス) を使用しました。何かご意見やご要望がありましたら、実装するかもしれませんので、お気軽にお問い合わせください。
他のプロジェクトもぜひご覧ください。以下に 2 つのメタ比較を示します。
ソーシャル比較ライブラリの広範なリストがあり、「ノード/エッジ グラフ」行はグラフ視覚化ライブラリをフィルターします。
DataVisualization.ch は、ノード/グラフ ライブラリを含む多くのライブラリを評価しました。残念ながら直接リンクがないため、「グラフ」でフィルタリングする必要があります。
類似のプロジェクトのリストは次のとおりです (いくつかはすでにここで言及されています)。
純粋な JavaScript ライブラリ
vis.jsさまざまな種類のネットワーク/エッジ グラフ、タイムライン、2D/3D チャートをサポートします。自動レイアウト、自動クラスタリング、弾力性のある物理エンジン、モバイル フレンドリー、キーボード ナビゲーション、階層レイアウト、アニメーションなど。MITライセンス自己組織化ネットワークの研究を専門とするオランダの企業によって開発されました。
サイトスケープ- jQueryの規約に従ったモバイル対応のインタラクティブなグラフ分析と視覚化。NIHの助成金により資金提供を受け、フォロー(見る彼の答えは以下)は、いくつかの大学やその他の組織の協力を得て実施されました。
JavaScript InfoVis ツールキット- Jitは、インタラクティブな多目的グラフ描画およびレイアウトフレームワークです。たとえば、双曲木Twitterデータビジュアライゼーションアーキテクトによって構築ニコラス・ガルシア・ベルモンテそして煎茶が購入した2010年に。
PlotlyのJS 可視化ライブラリは、JS、Python、R、MATLAB バインディングを備えた D3.js を使用します。IPython の nexworkx の例を参照してください。ここ、人間の相互作用の例ここ、 そしてJS 埋め込み API。
シグマグラフを描画するための軽量かつ強力なライブラリ
jsプラムインタラクティブな接続グラフを作成するための jQuery プラグイン
弾力のある- 力指向グラフレイアウトアルゴリズム
JS グラフ- 直線で接続されたドラッグ アンド ドロップ ボックス。線の最小限の自動レイアウト。
RaphaelJS の Graffle- 汎用多目的ベクター描画ライブラリのインタラクティブ グラフの例。RaphaelJS はノードを自動的にレイアウトできないため、別のライブラリが必要になります。
JointJS コア- David Durman の MPL ライセンスのオープンソース ダイアグラム ライブラリ。静的ダイアグラムまたは完全にインタラクティブなダイアグラム ツールとアプリケーション ビルダーの作成に使用できます。SVG をサポートするブラウザーで動作します。レイアウト アルゴリズムはコア パッケージには含まれていません。
mxグラフ以前は商用のHTML 5ダイアグラムライブラリでしたが、現在はApache v2.0で利用可能です。mxGraphは、ドロー.io。
商業図書館
ゴーJSインタラクティブなグラフ描画とレイアウトライブラリ
HTML 用ファイル商用グラフ描画およびレイアウトライブラリ
キーライン商用 JS ネットワーク可視化ツールキット
ズームチャート商用多目的可視化ライブラリ
Syncfusion JavaScript ダイアグラム描画と視覚化のための商用ダイアグラム ライブラリ。
廃墟となった図書館
サイトスケープウェブ埋め込み可能な JS ネットワーク ビューアー (新機能は予定されていません。Cytoscape.js に引き継がれています)
アーバー洗練されたグラフと優れた物理特性、そして見た目の美しさ。2012年5月に廃止。半メンテナンスフォークが存在します。
jssvgグラフ「SVG オブジェクトを使用する JavaScript ライブラリとして実装された、可能な限りシンプルな力指向グラフ レイアウト アルゴリズム」。2012 年に廃止されました。
プロトヴィス視覚化のためのグラフィカル ツールキット (JavaScript)。d3 に置き換えられました。
ムーホイール接続と関係のインタラクティブな JS 表現 (2008)
JSViz2007 年頃のグラフ可視化スクリプト
ダグレJavaScript のグラフレイアウト