JavaScript のグラフ視覚化ライブラリ

StackOverflow https://stackoverflow.com/questions/7034

質問

有向グラフを表すデータ構造があり、それを 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 つのメタ比較を示します。

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

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

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

純粋な JavaScript ライブラリ

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

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

  • JavaScript InfoVis ツールキット - Jit、インタラクティブな多目的グラフ描画およびレイアウト フレームワーク。たとえば、 双曲木. 。Twitter データビズ アーキテクトによって構築されました ニコラス・ガルシア・ベルモンテ そして 煎茶で買った 2010年に。

  • D3.js Protovis の後継となる強力な多目的 JS 視覚化ライブラリ。を参照してください。 力指向グラフ 例、および他のグラフの例は、 ギャラリー.

  • プロットリーさん JS 視覚化ライブラリは、JS、Python、R、MATLAB バインディングで D3.js を使用します。IPython の nextworkx の例を参照してください。 ここ, 、人間関係の例 ここ, 、 そして JS埋め込みAPI.

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

  • js鉛直 インタラクティブな接続グラフを作成するための jQuery プラグイン

  • 弾力のある - 力指向のグラフ レイアウト アルゴリズム

  • 処理.js John Resig による Processing ライブラリの Javascript ポート

  • JS グラフイット - 直線で結ばれたボックスをドラッグアンドドロップします。ラインの最小限の自動レイアウト。

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

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

  • MXグラフ 以前は商用だった HTML 5 作図ライブラリですが、現在は Apache v2.0 で利用可能です。mxGraph は、で使用される基本ライブラリです。 描画.io.

商業ライブラリ

放棄された図書館

  • サイトスケープウェブ 埋め込み可能な JS ネットワーク ビューア (新機能の予定はありません。Cytoscape.js に引き継がれました)

  • カンヴィズ JS レンダラー Graphviz グラフの場合。 放棄された 2013 年 9 月に。

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

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

  • jsdot クライアント側のグラフ描画アプリケーション。 2011年に放棄された.

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

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

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

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

非JavaScriptライブラリ

他のヒント

免責事項:私は Cytoscape.js の開発者です

Cytoscape.js は、HTML5 グラフ視覚化ライブラリです。API は洗練されており、次のような jQuery 規約に従っています。

  • クエリとフィルタリングのためのセレクタ (cy.elements("node[weight >= 50].someClass") 期待どおりの結果が得られます)、
  • 連鎖（例： cy.nodes().unselect().trigger("mycustomevent")),
  • イベントにバインドするための jQuery のような関数、
  • 要素をコレクションとして (jQuery には HTMLDomElements のコレクションがあるように)、
  • 拡張性 (カスタム レイアウト、UI、コアおよびコレクション機能などを追加可能)、
  • もっと。

グラフを使用した本格的な Web アプリの構築を考えている場合は、少なくとも Cytoscape.js を検討する必要があります。無料でオープンソースです。

http://js.cytoscape.org

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

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

商業的なシナリオでは、真剣な出場者は間違いなく yHTML用ファイル:

それは以下を提供します:

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

以下は、要求された機能のほとんどを示すサンプル レンダリングです。

Screenshot of a sample rendering created by the BPMN demo.

完全な開示:私は yWorks で働いていますが、Stackoverflow では雇用主の代表ではありません。

グルズが述べたように、 ジット には、非常に魅力的な RGraph および HyperTree ビジュアライゼーションを含む、いくつかの美しいグラフ/ツリー レイアウトがあります。

また、非常に単純な SVG ベースのものも用意しました。 githubでの実装 (依存関係なし、~125 LOC) これは、最新のブラウザーで表示される小さなグラフには十分に機能するはずです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top