523

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

注：チャートライブラリは探していません。

4

5 に答える 5

971

あなたが探しているかもしれないものをまとめました：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 つのメタ比較です。

  • SocialCompareにはライブラリの広範なリストがあり、「ノード / エッジ グラフ」行はグラフ視覚化のものをフィルタリングします。

  • DataVisualization.ch は、ノード/グラフのものを含む多くのライブラリを評価しました。残念ながら、直接リンクがないため、「グラフ」でフィルタリングする必要があります。選択 DataVisualization.ch

同様のプロジェクトのリストを次に示します (一部は既にここで言及されています)。

純粋な JavaScript ライブラリ

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

  • Cytoscape.js - モバイル サポートによるインタラクティブなグラフ分析と視覚化。jQuery 規則に従います。NIH の助成金によって資金提供され、いくつかの大学や他の組織の支援を受けて@maxkfranzによって開発されました(以下の彼の回答を参照してください)。

  • JavaScript InfoVis ツールキット- Jit は、インタラクティブな多目的グラフ描画およびレイアウト フレームワークです。たとえば、双曲線ツリーを参照してください。Twitter dataviz アーキテクトのNicolas Garcia Belmonteによって構築され、2010 年に Sencha に買収されました。

  • 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 グラフ描画およびレイアウト ライブラリ

  • HTML商用グラフ描画およびレイアウトライブラリ用のyFiles

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

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

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

放棄された図書館

  • Cytoscape Web Embeddable JS Network ビューアー (新機能の予定はありません。Cytoscape.js に引き継がれています)

  • Graphviz グラフ用のCanviz JSレンダラー。2013 年 9 月に放棄されました。

  • arbor.js素晴らしい物理学と目を楽しませる洗練されたグラフ。2012 年 5 月に放棄されました。いくつかの半整備されたフォークが存在します。

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

  • jsdotクライアント側グラフ描画アプリ。2011 年 に 廃車。

  • 視覚化のためのProtovisグラフィカル ツールキット (JavaScript)。d3 に置き換えられます。

  • 接続と関係のMoo Wheel Interactive JS 表現 (2008)

  • JSViz 2007 時代のグラフ視覚化スクリプト

  • dagre JavaScript のグラフ レイアウト

Javascript 以外のライブラリ

于 2010-03-02T19:48:15.093 に答える
53
于 2012-04-25T16:05:05.280 に答える
35

JsVISは非常に優れていましたが、グラフが大きくなると遅くなり、2007 年に廃止されました。

prefuseは、Java でリッチでインタラクティブなデータ視覚化を作成するためのソフトウェア ツールのセットです。フレア は、Adobe Flash Player で実行されるビジュアライゼーションを作成するための ActionScript ライブラリであり、2012 年から廃止されています。

于 2008-08-15T22:31:06.360 に答える
10

商業的なシナリオでは、真剣な競争相手は確かにHTML用のyFilesです。

それは提供します：

  • カスタムデータの簡単なインポート（このインタラクティブなオンラインデモは、OPが探していたものとほぼ同じように見えます）
  • ユーザージェスチャを介して図を作成および操作するためのインタラクティブな編集（完全なエディターを参照）
  • ライブラリのあらゆる側面をカスタマイズするための巨大なプログラミングAPI
  • グループ化とネストのサポート（インタラクティブとレイアウトアルゴリズムの両方）
  • 特定のUIツールキットに依存しませんが、ほとんどすべての既存のJavascriptツールキットへの統合をサポートします（ 「統合」デモを参照） 。
  • 自動レイアウト（「階層」、「有機」、「直交」、「ツリー」、「円形」、「放射状」などのさまざまなスタイル）
  • 自動の洗練されたエッジルーティング（障害物回避を備えた直交および有機エッジルーティング）
  • インクリメンタルおよび部分的なレイアウト（要素を追加および削除し、図の残りの部分をわずかに変更するか、まったく変更しない）
  • グループ化とネストのサポート（インタラクティブとレイアウトアルゴリズムの両方）
  • グラフ分析アルゴリズムの実装（パス、中心性、ネットワークフローなど）
  • SVG +CSSやCanvasなどのHTML5テクノロジーと、プロパティやその他のES5およびES6機能を活用する最新のJavascriptを使用します（ただし、同じ理由で、IEバージョン8以前では実行されません）。
  • UMDローダーを使用してオンデマンドでロードできるモジュラーAPIを使用します

要求された機能のほとんどを示すサンプルレンダリングを次に示します。

BPMNデモによって作成されたサンプルレンダリングのスクリーンショット。

完全な開示：私はyWorksで働いていますが、Stackoverflowでは雇用主を代表していません。

于 2013-01-07T11:00:49.737 に答える
7

guruz が述べたように、JITには魅力的な RGraph や HyperTree の視覚化を含む、素敵なグラフ/ツリー レイアウトがいくつかあります。

また、最新のブラウザーで表示される小さなグラフには十分に機能するはずの、非常にシンプルな SVG ベースの実装 (依存関係なし、LOC が 125 以下) を githubに用意しました。

于 2010-04-03T17:01:09.063 に答える