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


523

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

注:グラフ作成ライブラリは探していません。


回答:


923

私はあなたが探しているかもしれないものをまとめました: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は、ノード/グラフを含む多くのライブラリを評価しています。残念ながら、直接のリンクはないため、「グラフ」でフィルタリングする必要があります。選択DataVisualization.ch

ここに同様のプロジェクトのリストがあります(いくつかはすでにここで言及されています):

純粋なJavaScriptライブラリ

  • 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で使用される基本ライブラリです

商業図書館

放棄されたライブラリ

  • Cytoscape Web Embeddable JS Networkビューア(新機能は計画されていません。Cytoscape.jsが成功しました)

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

  • arbor.js素晴らしい物理学と目の保養を備えた洗練されたグラフ。2012年5月に廃止されました。いくつかのセミメンテナンスフォークが存在します。

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

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

  • Protovis Graphical Toolkit for Visualization(JavaScript)。d3に置き換えられました。

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

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

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

JavaScript以外のライブラリ

  • Graphviz洗練されたグラフ視覚化言語

    • Graphvizは、ここでEmscriptenを使用してJavascriptにコンパイルされています。
  • フレア美しくパワフルなFlashベースのグラフ描画

  • NodeBox Pythonグラフの可視化


4
はい、有向エッジが可能です!g.addEdge( "cherry"、 "apple"、{"directed":true});を使用します
ヨハンフィリップストラトハウゼン

chart.jsとchartnew.jsライブラリも追加する必要があります。これ(charts.livegap.com)は生成されます
Omar Sedki

1
リストに追加できるさらに注目すべき2つのライブラリ、つまりLinkuroius.jsVivaGraphJSがあります。
–ŁukaszK 2017

2
yFILESレイアウトアルゴリズムのオープンソースの代替はありますか?などyworks.com/products/yfiles-layout-algorithms-for-cytoscape
ライアン・チョウ

1
私は他の人に役立つ無料の軽量ライブラリを作成しました:github.com/n-yousefi/Arg-Graph
Naser Yousefi

48

免責事項:私は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


6
すべてのAPIは完全に文書化されています。ドキュメントは、最初から順を追って(つまり、init)も案内します。あり、個々のAPIの実行されている例は、ライブデモがあります。機能はJSグラフライブラリをはるかに上回っており、ドキュメントはほとんどのプロジェクトよりも広範囲です(商用であれ、オープンソースであれ)。ドキュメントであなたに何が欠けているのですか?
maxkfranz 2015年

3
わかりました、ごめんなさい。私は正しく見ていませんでした。はい、それは十分に文書化されています。
Storm

グラフを階層順にレイアウトする方法はありますか(ツリーのように見えますが、実際にはグラフであり、複数の親を持つノードがあることを意味します)
Mina

dagreと幅優先レイアウトの両方がそのケースで機能します
maxkfranz '12年

矢印のドラッグアンドドロップでグラフを編集する必要があります。このライブラリは、それらは不変であると述べています。だから私は別のライブラリを探す必要があります...
ユージーンGr。Philippov

35

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

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


2
これらのライブラリは現時点では少し古いようですが、今日人々は何を使用していますか?具体的には、独立したxyシリーズのプロットを調べています。
12

22
-1-prefuseはJavascriptではなくJavaです。FlareはFlashであり、JavaScriptでもありません。JsVISはバグが多く、時代遅れです。
anatly techtonik 2012

2
@animuson:別の話題外のもの:OPがJavaScriptライブラリを求めていました。答えの中でJSに関する唯一の部分は、2007
。– Dan Dascalescu 2014年

10

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

それは提供しています:

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

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

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

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


3
アルゴリズムの最高のコレクションですが、最もクローズドなため、オープンソースプロジェクトでは使用できません:-(
forresto

1
「ベスト・コレクション」はおそらく本当ですが、「ほとんど閉じた」相対的であり、「不可能」が正しくありません:それは商用ライセンスですが、オープンソースプロジェクトが使用していますので、しない限り、ウイルスのライセンスを、それができるオープンソースプロジェクトで使用されます。もちろん、他のオープンソースプロジェクトでオープンソースプロジェクトを使用することそれほど問題ではありません...
Sebastian

1
オープンソースのしくみを理解していないようです。あなたの会社は、オープンソースプロジェクトに、このソフトウェアを無限の開発者に使用する権利、それを無限の開発者、貢献者、テスターに​​配布する権利を、固定された1回限りのコストで許可できると言っていますか?もちろん違います。
フェリックスSaparelli

2
@FélixSaparelli:私を信じて:そうだ。あなたが説明することは可能で、同様のことが以前に行われました。あなたは標準のライセンス条項にリンクしていますが、もちろんカスタム契約が可能であり、以前に行われています。しかし、これはこれを議論するのに適切な場所ではありません。yWorksに直接お問い合わせください。
セバスチャン

7

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

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.