Setara murni JavaScript Graphviz [ditutup]

139

Adakah yang menyadari implementasi Javascript murni dari diagram alur arah yang dapat dihasilkan oleh GraphViz? Saya TIDAK tertarik dengan output visual yang cantik, tetapi perhitungan untuk mengetahui kedalaman maksimum dari setiap node, bersama dengan tata letak garis bezier yang dioptimalkan untuk meminimalkan jumlah sisi berpotongan saat Anda berurusan dengan grafik daripada pohon informasi. Saya ingin menjalankan kode ini di dalam browser; Saya sadar bahwa saya dapat dengan mudah menanamkan Graphviz ke server Node saya sebagai ekstensi, atau bahkan popen()dan mengalirkan informasi grafik dalam .dotformat.

Untuk referensi, berikut ini adalah output GraphViz yang khas. Perhatikan bagaimana elemen ditumpuk dan diberi jarak untuk memungkinkan garis penghubung berjalan di antara node, tanpa berpotongan (sangat sering) atau melewati node.

masukkan deskripsi gambar di sini

javascript graphviz Armentage
sumber
Apakah Anda memiliki contoh diagram seperti itu, bagi kita yang tidak terbiasa dengan GraphViz?
Matt Ball
Ini tampaknya merupakan duplikat kode visualisasi Grafik dalam javascript?
Daniel Pryden
3
Mungkin - memeriksanya. Banyak komentar dan tanggapan menunjuk pada alat charting yang sama sekali tidak seperti GraphViz, atau hanya mampu menggambar output GraphViz, tetapi tidak dapat melakukan tata letak sendiri.
Armentage

Jawaban:

84

Lihatlah implementasi JavaScript murni dari penyaji kanvas .dot ini:

http://ushiroad.com/jsviz/

Perpustakaan tidak didokumentasikan - penulis pasti harus mempublikasikan dan mendokumentasikannya lebih banyak (saya akan menghubunginya untuk menyarankan agar ia meletakkannya di github, setidaknya).

Pembaruan : kode telah didorong ke github: https://github.com/gyuque/livizjs

Pembaruan (14/2/2013) : pesaing lain telah muncul! siapa pun yang tertarik pada subjek pasti harus melihat halaman contoh Viz.js dan github repo .

Pembaruan (7/16/2020) : (tujuh tahun kemudian) http://webgraphviz.com/ juga bagus! :-)

Greg Sadetsky
sumber
1
Proyek ini terlihat luar biasa, dan mungkin merupakan solusi terbaik dari semua yang pernah saya lihat, tetapi pasti akan membutuhkan beberapa penggalian di sumbernya untuk mencari tahu bagaimana menggunakannya. Kode tampaknya cukup masuk akal, jadi mungkin tidak terlalu buruk.
captncraig
Sejauh ini, ini yang paling dekat dengan apa yang saya cari di pertanyaan awal. Ini bukan hanya RENDERER, ia tahu cara menghitung grafik yang diarahkan juga. Apakah itu menjalankan DOT di backend di suatu tempat, atau apakah seluruh algoritma pembuatan grafik berjalan di browser saya?
Armentage
1
@Armentage, ini berjalan sepenuhnya di browser Anda. Graphviz telah dikompilasi ke JavaScript, terima kasih kepada emscripten . Kode sumber, meskipun tidak terdokumentasi sebagaimana mestinya, sekarang untungnya (setelah mengomel penulis melalui Twitter dan email) ;-) tersedia di sini . Forking proyek dan membuat API yang mudah digunakan untuk itu akan menjadi langkah besar pertama ..!
Greg Sadetsky
5
Hanya ingin menambahkan perpustakaan Graph Dracula ke daftar kandidat. Anda dapat melihat demo di sini . Ini menghitung grafik dan menampilkannya (menggunakan Raphael ); kodenya pendek dan bersih.
Greg Sadetsky
Livizjs adalah alat yang hebat, tetapi perhatikan bahwa Livizjs tidak mendukung bahasa lengkap, seperti 'cluster'
SirLenz0rlot
37

Setelah mencari jauh dan rendah akhirnya saya menemukan jawabannya.

Solusinya adalah seseorang melakukan cross compile Graphviz ke Javascript menggunakan llvm + emscripten. Ini tautannya:

http://viz-js.com/

Sumbernya dapat ditemukan di: https://github.com/mdaines/viz.js

Dan untuk cukup menggunakan laman web:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");
Zachary Vorhies
sumber
Ini persis apa yang saya cari juga
RobAu
6
Pembaruan: Saya membuat situs demo yang menunjukkan bagaimana mengaitkan viz.js itu menyenangkan dan mudah! Lihatlah di www.webgraphviz.com
Zachary Vorhies
Tautan github yang disediakan rusak
Jaime
2
github.com/mdaines/viz.js
Somu
19

Setelah melihat semua opsi, saya menemukan viz.js ( https://github.com/mdaines/viz.js/ ) berdasarkan dari jsviz dan graphviz.js untuk benar-benar memiliki API yang dapat digunakan dari halaman web, dan cukup banyak contoh untuk memahami.

Jason Siefken
sumber
1
viz.js sangat bagus dan sangat mudah, bukan karena saat ini tidak mendukung label seperti html: graphviz.org/doc/info/shapes.html#html
SirLenz0rlot
11

Seseorang dapat mencoba mengubah graphviz menjadi javascript, seperti yang dilakukan untuk contoh 'pembaca PDF': https://github.com/kripken/emscripten

pedroteixeira
sumber
Ini adalah saran luar biasa hebat. Saya berpikir untuk mencoba menerjemahkan kode ke JS sendiri ...... tapi trik llvm ini adalah kegilaan yang indah!
Armentage
Saya sudah benar-benar memberikan ini beberapa upaya sejauh ini .. emscripten masih cukup muda, dan dokumentasi singkat. Pasti proyek yang bagus untuk ditonton, saya bisa melihat bagaimana itu bisa memberikan banyak kekuatan. Tetapi sekarang jika Anda bukan orang yang menulisnya agak sulit.
synthesizerpatel
8

Ini bukan pengganti graphviz yang sudah jadi tapi d3.js adalah perpustakaan yang dapat melakukan berbagai tata letak dari data yang diberikan dan akan menjadi platform yang bagus untuk mengimplementasikan graphviz.

Berikut adalah contoh tata letak yang diarahkan secara paksa yang merupakan salah satu bentuk dari apa yang dilakukan graphviz.

Berikut ini adalah pidato tentang tata letak dengan slide interaktif luar biasa mengagumkan .

Untuk mengetahui proyeknya, tutorialnya sangat bagus.

w00t
sumber
1
github.com/cpettitt/dagre-d3 mengimplementasikan diagram DOT dalam JavaScript. Anda dapat bermain dengan demo di cpettitt.github.io/project/dagre-d3/latest/demo/… .
Arthur2e5