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

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

5

Berikut ini adalah kompilasi silang Graphviz ke Javascript yang dilakukan menggunakan Emscripten

https://github.com/bpartridge/graphviz.js

— Paul Dixon
sumber