Visualisasi grafik perpustakaan di JavaScript

I've hanya menempatkan bersama-sama apa yang mungkin anda cari: http://www.graphdracula.net It's JavaScript dengan grafik diarahkan layouting, SVG, dan anda bahkan dapat drag node sekitar. Masih perlu beberapa tweaking, tapi ini benar-benar dapat digunakan. Anda membuat node dan tepi dengan mudah dengan kode JavaScript seperti ini:

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

Aku digunakan disebutkan sebelumnya Raphael JS library (graffle contoh) ditambah beberapa kode untuk memaksa berdasarkan grafik algoritma tata letak yang saya temukan di internet (segala sesuatu yang open source, lisensi MIT). Jika anda memiliki komentar atau butuh fitur tertentu, saya dapat menerapkannya, hanya meminta!

Anda mungkin ingin melihat proyek-proyek lain, terlalu! Di bawah ini adalah dua meta-perbandingan:

• SocialCompare memiliki daftar ekstensif perpustakaan, dan "Node / edge grafik" line filter untuk visualisasi grafik yang.
• DataVisualization.ch telah dievaluasi banyak perpustakaan, termasuk node/grafik yang. Sayangnya ada's tidak ada link langsung sehingga anda'll harus filter untuk "grafik": Berikut ini's daftar proyek-proyek serupa (beberapa sudah disebutkan di sini):

  Murni Perpustakaan JavaScript

• vis.js mendukung berbagai jenis jaringan/edge grafik, ditambah jadwal dan grafik 2D/3D. Auto-layout, auto-clustering, kenyal fisika mesin, mobile-friendly, navigasi keyboard, hirarki tata letak, animasi dll. MIT lisensi dan dikembangkan oleh perusahaan belanda yang mengkhususkan diri dalam penelitian tentang self-organizing networks.
• Cytoscape.js - grafik interaktif analisis dan visualisasi dengan dukungan mobile, jQuery berikut konvensi. Didanai melalui NIH hibah dan dikembangkan oleh oleh @maxkfranz (lihat jawabannya di bawah ini) dengan bantuan dari beberapa perguruan tinggi dan organisasi-organisasi lain.
• JavaScript InfoVis Toolkit - Jit, interaktif, multi-tujuan penggambaran secara grafik dan layout framework. Lihat misalnya Hiperbolik Pohon. Dibangun oleh Twitter dataviz arsitek Nicolas Garcia Belmonte dan dibeli oleh Sencha pada tahun 2010.
• D3.js Kuat multi-tujuan JS visualisasi perpustakaan, penerus dari Protovis. Lihat force-grafik diarahkan contoh, dan lain grafik contoh di galeri.
• Plotly's JS visualisasi perpustakaan menggunakan D3.js dengan JS, Python, R, dan MATLAB binding. Melihat nexworkx contoh di IPython di sini, interaksi manusia contoh di sini, dan JS Cantumkan API.
• sigma.js yang Ringan tapi kuat perpustakaan untuk menggambar grafik
• jsPlumb jQuery plug-in untuk menciptakan interaktif terhubung grafik
• Kenyal - kekuatan-directed graph algoritma tata letak
• Processing.js Javascript port Pengolahan perpustakaan oleh John Resig
• JS Grafik - drag'n'drop box yang dihubungkan oleh garis lurus. Minimal auto-layout garis.
• RaphaelJS's Graffle - grafik interaktif contoh dari generic multi-tujuan vektor menggambar perpustakaan. RaphaelJS dapat't letak node secara otomatis; anda'll perlu perpustakaan lain untuk itu.
• JointJS Core - David Durman's MPL-lisensi open source diagram perpustakaan. Hal ini dapat digunakan untuk membuat diagram statis atau sepenuhnya interaktif diagram alat dan aplikasi pembangun. Bekerja di browser yang mendukung SVG. Tata letak algoritma tidak termasuk dalam paket inti
• mxGraph Sebelumnya komersial HTML 5 diagram perpustakaan, sekarang tersedia di bawah Apache v2.0. mxGraph adalah dasar perpustakaan yang digunakan dalam menggambar.io.

Komersial perpustakaan

• GoJS Interaktif grafik gambar dan tata letak perpustakaan
• yFiles untuk HTML Komersial grafik gambar dan tata letak perpustakaan
• KeyLines Komersial JS visualisasi jaringan toolkit
• ZoomCharts Komersial multi-tujuan visualisasi perpustakaan
• Syncfusion JavaScript Diagram Komersial diagram perpustakaan untuk menggambar dan visualisasi.

  Ditinggalkan perpustakaan

• Cytoscape Web Embeddable JS Jaringan viewer (tidak ada fitur baru yang direncanakan; digantikan oleh Cytoscape.js)
• Canviz JS penyaji untuk Graphviz grafik. Meninggalkan di September 2013.
• arbor.js grafik Canggih dengan fisika bagus dan eye-candy. Ditinggalkan pada Mei 2012. Beberapa semi-dikelola garpu ada.
• jssvggraph "Yang paling sederhana mungkin kekuatan diarahkan letak grafik algoritma diimplementasikan sebagai sebuah library Javascript yang menggunakan SVG benda". Ditinggalkan pada tahun 2012.
• jsdot sisi Klien grafik aplikasi menggambar. Ditinggalkan di 2011.
• Protovis Toolkit Grafis untuk Visualisasi (JavaScript). Diganti dengan d3.
• Moo Roda Interaktif JS representasi untuk koneksi dan hubungan (2008)
• JSViz 2007-era visualisasi grafik script
• dagre letak Grafik untuk JavaScript

  Non-Javascript Library

• Graphviz Canggih visualisasi grafik bahasa
• Graphviz telah disusun untuk Javascript menggunakan Emscripten di sini dengan online demo interaktif di sini
• Flare yang Indah dan kuat berbasis Flash grafik gambar
• NodeBox Python Visualisasi Grafik

Disclaimer: saya'm pengembang Cytoscape.js

Cytoscape.js adalah HTML5 grafik visualisasi perpustakaan. API yang canggih dan mengikuti jQuery konvensi, termasuk

• penyeleksi untuk menanyakan dan penyaringan (cy.unsur-unsur("node[berat badan >= 50].someClass") tidak banyak seperti yang anda harapkan),
• chaining (misalnya cy.node().batalkan().pemicu("mycustomevent")),
• jQuery-seperti fungsi untuk mengikat peristiwa,
• unsur-unsur sebagai koleksi (seperti jQuery memiliki koleksi HTMLDomElements),
• diperpanjang (dapat menambahkan kustom layout, UI, inti & kumpulan fungsi, dan sebagainya),
• dan banyak lagi.

Jika anda're berpikir tentang bangunan serius webapp dengan grafik, anda setidaknya harus mempertimbangkan Cytoscape.js. It's gratis dan open-source:

http://js.cytoscape.org

JsVIS cukup bagus, tapi lambat dengan grafik yang lebih besar, dan telah ditinggalkan sejak tahun 2007.

prefuse adalah satu set perangkat lunak untuk menciptakan interaktif yang kaya visualisasi data dalam Java. flare adalah sebuah ActionScript perpustakaan untuk menciptakan visualisasi yang berjalan di Adobe Flash Player, ditinggalkan sejak tahun 2012.

Dalam komersial skenario, serius kontestan pasti adalah yFiles untuk HTML:

Hotel ini menawarkan:

• Mudah impor kustom data (ini online interaktif demo tampaknya cukup banyak melakukan apa OP sedang mencari)
• Mengedit interaktif untuk membuat dan memanipulasi diagram melalui gerakan pengguna (lihat lengkap editor)
• Besar pemrograman API untuk menyesuaikan masing-masing dan setiap aspek dari perpustakaan
• Dukungan untuk pengelompokan dan bersarang (kedua interaktif, serta melalui tata letak algoritma)
• Tidak tergantung pada specfic UI toolkit tapi mendukung integrasi ke hampir semua yang ada Javascript toolkit (lihat "integrasi" demo)
• Tata letak otomatis (berbagai gaya, seperti "hierarkis", "organik", "orthogonal", "pohon", "melingkar", "radial", dan banyak lagi)
• Otomatis canggih tepi routing (orthogonal dan organik tepi routing dengan obstacle avoidance)
• Incremental dan parsial tata letak (menambah dan menghapus elemen dan hanya sedikit atau tidak sama sekali mengubah sisa diagram)
• Dukungan untuk pengelompokan dan bersarang (kedua interaktif, serta melalui tata letak algoritma)
• Implementasi grafik analisis algoritma (jalan, centralities, jaringan arus, dll.)
• Menggunakan HTML 5 teknologi seperti SVG+CSS dan Canvas dan Javascript modern yang memanfaatkan sifat-sifat dan lainnya lebih ES5 dan fitur-fitur ES6 (tapi untuk alasan yang sama tidak akan berjalan di versi IE 8 dan bawah).
• Menggunakan modular API yang dapat dimuat pada permintaan menggunakan UMD loader

Berikut adalah contoh rendering yang menunjukkan sebagian besar fitur yang diminta:

Pengungkapan penuh: saya bekerja untuk yWorks, tapi di Stackoverflow saya tidak mewakili majikan saya.

Sebagai guruz disebutkan, JIT memiliki beberapa indah graf/pohon layout, termasuk cukup menarik RGraph dan HyperTree visualisasi.

Juga, saya've hanya memasang super sederhana berbasis SVG pelaksanaan di github (tidak ada ketergantungan, ~125 LOC) yang harus bekerja cukup baik untuk grafik kecil yang ditampilkan di browser modern.