Grafik grafik visualisasi dalam JavaScript

Saya memiliki struktur data yang mewakili grafik yang diarahkan, dan saya ingin membuatnya secara dinamis di halaman HTML. Grafik ini biasanya hanya beberapa node, mungkin sepuluh di ujung paling atas, jadi tebakan saya adalah bahwa kinerja tidak akan menjadi masalah besar. Idealnya, saya ingin dapat menghubungkannya dengan jQuery sehingga pengguna dapat mengubah tata letak secara manual dengan menyeret simpul-simpul di sekitarnya.

Catatan: Saya tidak mencari perpustakaan bagan.

Saya baru saja mengumpulkan apa yang Anda cari: http://www.graphdracula.net

Ini JavaScript dengan tata letak grafik yang diarahkan, SVG dan Anda bahkan dapat menyeret node di sekitar. Masih membutuhkan beberapa penyesuaian, tetapi benar-benar dapat digunakan. Anda membuat simpul dan tepian dengan mudah dengan kode JavaScript seperti ini:

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

Saya menggunakan perpustakaan JS Raphael yang disebutkan sebelumnya (contoh graffle) ditambah beberapa kode untuk algoritma tata letak grafik berbasis gaya yang saya temukan di internet (semuanya open source, lisensi MIT). Jika Anda memiliki komentar atau membutuhkan fitur tertentu, saya dapat mengimplementasikannya, tanyakan saja!

Anda mungkin ingin melihat proyek lain juga! Berikut adalah dua perbandingan meta:

• SocialCompare memiliki daftar pustaka yang luas, dan baris "Node / edge graph" akan memfilter untuk visualisasi grafik.

• DataVisualization.ch telah mengevaluasi banyak perpustakaan, termasuk yang node / grafik. Sayangnya tidak ada tautan langsung sehingga Anda harus memfilter untuk "grafik":

Berikut daftar proyek serupa (beberapa sudah disebutkan di sini):

Perpustakaan JavaScript Murni

• vis.js mendukung banyak jenis grafik jaringan / tepi, ditambah jadwal dan grafik 2D / 3D. Tata letak otomatis, pengelompokan otomatis, mesin fisika kenyal, mobile-friendly, navigasi keyboard, tata letak hierarkis, animasi dll. MIT berlisensi dan dikembangkan oleh perusahaan Belanda yang mengkhususkan diri dalam penelitian tentang jaringan yang mengatur sendiri.

• Cytoscape.js - analisis grafik interaktif dan visualisasi dengan dukungan seluler, mengikuti konvensi jQuery. Didanai melalui hibah NIH dan dikembangkan oleh @maxkfranz (lihat jawabannya di bawah ) dengan bantuan dari beberapa universitas dan organisasi lain.

• JavaScript InfoVis Toolkit - Jit, kerangka kerja menggambar dan tata letak grafik interaktif multi-tujuan. Lihat misalnya Pohon Hiperbolik . Dibangun oleh arsitek dataviz Twitter Nicolas Garcia Belmonte dan dibeli oleh Sencha pada 2010.

• D3.js Perpustakaan visualisasi JS multiguna yang kuat, penerus Protovis. Lihat contoh grafik yang diarahkan secara paksa , dan contoh grafik lainnya di galeri .

• Pustaka visualisasi JS Plotly menggunakan D3.js dengan binding JS, Python, R, dan MATLAB. Lihat contoh nexworkx di IPython di sini , contoh interaksi manusia di sini , dan JS Embed API .

• sigma.js Pustaka yang ringan namun kuat untuk menggambar grafik

• jsPlumb plug-in jQuery untuk membuat grafik yang terhubung secara interaktif

• Springy - algoritma tata letak grafik yang diarahkan secara paksa

• Port Javascript Processing.js dari perpustakaan Pemrosesan oleh John Resig

• JS Graph It - drag'n'drop box yang dihubungkan oleh garis lurus. Tata letak garis minimal.

• RaphaelJS's Graffle - contoh grafik interaktif dari perpustakaan gambar vektor multi-tujuan umum. RaphaelJS tidak dapat mengatur tata letak node secara otomatis; Anda akan membutuhkan perpustakaan lain untuk itu.

• JointJS Core - perpustakaan diagram sumber terbuka berlisensi MPL-David Durman. Ini dapat digunakan untuk membuat diagram statis atau alat diagram penuh dan pembuat aplikasi. Berfungsi di browser yang mendukung SVG. Algoritme tata letak tidak termasuk dalam paket inti

• mxGraph Perpustakaan diagram HTML 5 komersial sebelumnya, sekarang tersedia di bawah Apache v2.0. mxGraph adalah perpustakaan dasar yang digunakan dalam draw.io .

Perpustakaan komersial

• Perpustakaan gambar dan tata letak grafik GoJS Interactive

• yFiles untuk HTML Menggambar grafik komersial dan perpustakaan layout

• Perangkat visualisasi jaringan KeyLines Commercial JS

• ZoomCharts Perpustakaan visualisasi multi-tujuan komersial

• Syncfusion JavaScript Diagram Perpustakaan diagram komersial untuk menggambar dan visualisasi.

Perpustakaan terbengkalai

• Cytoscape Web Embeddable JS Network viewer (tidak ada fitur baru yang direncanakan; digantikan oleh Cytoscape.js)

• Canviz JS renderer untuk grafik Graphviz. Ditinggalkan pada Sep 2013.

• arbor.js Grafik canggih dengan fisika dan eye-candy yang bagus. Ditinggalkan pada Mei 2012. Ada beberapa garpu semi-terawat .

• jssvggraph "Algoritma tata letak grafik yang paling sederhana yang mungkin diimplementasikan sebagai perpustakaan Javascript yang menggunakan objek SVG". Ditinggalkan pada tahun 2012.

• jsdot Aplikasi menggambar grafik sisi Klien. Ditinggalkan pada tahun 2011 .

• Protovis Graphical Toolkit untuk Visualisasi (JavaScript). Digantikan oleh d3.

• Representasi JS Interaktif Roda untuk koneksi dan hubungan (2008)

• Skrip visualisasi grafik era 2007 JSViz

• tata letak Grafik dagre untuk JavaScript

Perpustakaan Non-Javascript

• Graphviz Bahasa visualisasi grafik yang canggih

  • Graphviz telah dikompilasi ke Javascript menggunakan Emscripten di sini dengan demo interaktif online di sini

• Flare Gambar grafis berbasis Flash yang indah dan kuat

• Visualisasi Grafik NodeBox Python

Penafian: Saya adalah pengembang Cytoscape.js

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

• penyeleksi untuk query dan penyaringan ( cy.elements("node[weight >= 50].someClass")tidak seperti yang Anda harapkan),
• rantai (misalnya cy.nodes().unselect().trigger("mycustomevent")),
• Fungsi seperti jQuery untuk mengikat ke acara,
• elemen sebagai koleksi (seperti jQuery memiliki koleksi HTMLDomElements),
• ekstensibilitas (dapat menambahkan tata letak khusus, UI, fungsi inti & koleksi, dan sebagainya),
• dan lainnya.

Jika Anda berpikir untuk membuat aplikasi web serius dengan grafik, Anda setidaknya harus mempertimbangkan Cytoscape.js. Ini gratis dan open-source:

http://js.cytoscape.org

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

prefuse adalah seperangkat alat perangkat lunak untuk membuat visualisasi data interaktif yang kaya di Jawa. flare adalah pustaka ActionScript untuk membuat visualisasi yang berjalan di Adobe Flash Player, ditinggalkan sejak 2012.

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

Menawarkan:

• Impor mudah data kustom ( demo online interaktif ini tampaknya cukup banyak melakukan persis apa yang dicari OP)
• Pengeditan interaktif untuk membuat dan memanipulasi diagram melalui gerakan pengguna (lihat editor lengkap )
• API pemrograman yang sangat besar untuk menyesuaikan setiap aspek perpustakaan
• Dukungan untuk pengelompokan dan bersarang (baik interaktif, maupun melalui algoritma tata letak)
• Tidak bergantung pada toolkit UI khusus tetapi mendukung integrasi ke hampir semua Javascript toolkit yang ada (lihat demo "integrasi" )
• Tata letak otomatis (berbagai gaya, seperti "hierarkis", "organik", "ortogonal", "pohon", "bundar", "radial", dan lainnya)
• Routing edge canggih otomatis (routing edge orthogonal dan organik dengan penghindaran rintangan)
• Tata letak tambahan dan parsial (menambah dan menghapus elemen dan hanya sedikit atau tidak sama sekali mengubah sisa diagram)
• Dukungan untuk pengelompokan dan bersarang (baik interaktif, maupun melalui algoritma tata letak)
• Implementasi algoritma analisis grafik (jalur, pusat, aliran jaringan, dll.)
• Menggunakan teknologi HTML 5 seperti SVG + CSS dan Canvas dan properti leveraging Javascript modern dan fitur ES5 dan ES6 lainnya (tapi untuk alasan yang sama tidak akan berjalan di IE versi 8 dan lebih rendah).
• Menggunakan API modular yang dapat dimuat sesuai permintaan menggunakan pemuat UMD

Berikut ini adalah rendering sampel yang menunjukkan sebagian besar fitur yang diminta:

Pengungkapan penuh: Saya bekerja untuk yWorks, tetapi di Stackoverflow saya tidak mewakili atasan saya.

Seperti yang disebutkan guruz, JIT memiliki beberapa tata letak grafik / pohon yang indah, termasuk visualisasi RGraph dan HyperTree yang cukup menarik.

Juga, saya baru saja memasang implementasi super sederhana berbasis SVG di github (tanpa dependensi, ~ 125 LOC) yang seharusnya bekerja cukup baik untuk grafik kecil yang ditampilkan di browser modern.