Odpowiednik czystego JavaScript Graphviz [zamknięty]

139

Czy ktoś wie o czystej, opartej na JavaScript implementacji diagramów przepływu kierunkowego, które GraphViz jest w stanie wygenerować? NIE interesują mnie ładne efekty wizualne, ale obliczenia mające na celu określenie maksymalnej głębokości każdego węzła, wraz z układem linii Beziera, które są zoptymalizowane, aby zminimalizować liczbę przecinających się krawędzi, gdy masz do czynienia z wykresem, a nie drzewem informacji. Chciałbym uruchomić ten kod zarówno w przeglądarce; Zdaję sobie sprawę, że mogę łatwo osadzić Graphviz na moim serwerze Node jako rozszerzenie, a nawet popen()go i przesyłać strumieniowo informacje o wykresie w .dotformacie.

Dla odniesienia, oto typowe wyjście GraphViz. Zwróć uwagę, jak elementy są układane w stos i rozmieszczone w odstępach, aby umożliwić liniom łączącym przemieszczanie się między węzłami bez przecinania się (bardzo często) lub przechodzenia przez węzły.

wprowadź opis obrazu tutaj

javascript graphviz Armentage
źródło
Czy masz przykład takiego diagramu dla tych z nas, którzy nie znają GraphViz?
Matt Ball
Wygląda na to, że jest to duplikat kodu wizualizacji Graph w javascript?
Daniel Pryden,
3
Może - sprawdzam to. Wiele komentarzy i odpowiedzi wskazuje na narzędzia do tworzenia wykresów, które w niczym nie przypominają GraphViz lub które są w stanie jedynie rysować dane wyjściowe GraphViz, ale nie mogą same wykonać układu.
Armentage

Odpowiedzi:

84

Spójrz na tę implementację renderowania płótna .dot w czystym JavaScript:

http://ushiroad.com/jsviz/

Biblioteka nie jest udokumentowana - autor zdecydowanie powinien ją bardziej nagłośnić i udokumentować (skontaktuję się z nim, aby zasugerować, że umieścił ją przynajmniej na githubie).

Aktualizacja : kod został przesłany na github: https://github.com/gyuque/livizjs

Aktualizacja (14.02.2013) : pojawił się kolejny pretendent! każdy zainteresowany tym tematem powinien zdecydowanie spojrzeć na przykładową stronę Viz.js i repozytorium github .

Aktualizacja (16.07.2020) : (siedem lat później) http://webgraphviz.com/ jest również świetne! :-)

Greg Sadetsky
źródło
1
Ten projekt wygląda niesamowicie i jest prawdopodobnie najlepszym rozwiązaniem ze wszystkich, jakie widziałem, ale na pewno zajmie trochę czasu w źródle, aby dowiedzieć się, jak go użyć. Kod wydaje się jednak całkiem rozsądny, więc może nie być taki zły.
captncraig
Jak dotąd jest to najbliższe temu, czego szukałem w pierwotnym pytaniu. To nie jest tylko RENDERER, wie również, jak obliczyć skierowany graf. Czy gdzieś działa DOT na zapleczu, czy też cały algorytm generowania wykresów działa w mojej przeglądarce?
Armentage,
1
@Armentage, działa całkowicie w Twojej przeglądarce. Graphviz został skompilowany do JavaScript, dzięki emscripten . Kod źródłowy, choć nie jest tak udokumentowany, jak mógłby być, jest teraz na szczęście (po namówieniu autora na Twitterze i e-mailu) ;-) dostępny tutaj . Rozwidlenie projektu i stworzenie łatwego w użyciu API byłoby pierwszym wielkim krokiem…!
Greg Sadetsky
5
Chciałem tylko dodać bibliotekę Graph Dracula do listy kandydatów. Możesz zobaczyć demo tutaj . Oblicza wykres i wyświetla go (używając Raphaela ); kod jest krótki i przejrzysty.
Greg Sadetsky,
Livizjs to świetne narzędzie, ale pamiętaj, że nie obsługuje pełnego języka, takiego jak
``
37

Po przeszukaniu daleko i nisko w końcu znalazłem odpowiedź.

Rozwiązaniem było to, że ktoś skompilował Graphviz do Javascript przy użyciu llvm + emscripten. Tutaj jest link:

http://viz-js.com/

Źródło można znaleźć pod adresem : https://github.com/mdaines/viz.js

Aby po prostu otworzyć stronę internetową, użyj:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");
Zachary Vorhies
źródło
To jest dokładnie to, czego szukałem
RobAu
6
Aktualizacja: stworzyłem stronę demonstracyjną pokazującą, jak podłączanie się do viz.js jest zabawne i łatwe! Sprawdź to na www.webgraphviz.com
Zachary
Podane linki github są uszkodzone
Jaime
2
github.com/mdaines/viz.js
Somu
19

Po przejrzeniu wszystkich opcji znalazłem viz.js ( https://github.com/mdaines/viz.js/ ) w oparciu o jsviz i graphviz.js, aby faktycznie mieć interfejs API do użytku ze strony internetowej i wystarczająco dużo przykładów, aby Rozumiesz.

Jason Siefken
źródło
1
viz.js jest świetny i bardzo łatwy, co nie znaczy, że obecnie nie obsługuje etykiet w stylu html: graphviz.org/doc/info/shapes.html#html
SirLenz0rlot,
11

Można spróbować przekonwertować graphviz do javascript, tak jak zrobiono to dla przykładu „czytnik PDF”: https://github.com/kripken/emscripten

pedroteixeira
źródło
To niesamowicie świetna sugestia. Myślałem o samodzielnym przetłumaczeniu kodu do JS ...... ale ta sztuczka z llvm to piękne szaleństwo!
Armentage
Do tej pory dałem kilka prób ... emscripten jest wciąż dość młody, a dokumentacja jest krótka. Zdecydowanie świetny projekt do obejrzenia, widzę, jak może zapewnić dużą moc. Ale teraz, jeśli nie jesteś tym, który to napisał, jest to trochę nieporęczne.
synthesizerpatel
8

To nie jest gotowy zamiennik Graphviz, ale d3.js to biblioteka, która może wykonywać różne układy na podstawie danych i byłaby świetną platformą do implementacji Graphviz.

Oto przykład układów ukierunkowanych na siłę, które są jedną z form tego, co robi Graphviz.

Oto przemówienie o układach z niesamowicie niesamowitymi interaktywnymi slajdami .

Aby poznać projekt, tutoriale są bardzo dobre.

w00t
źródło
1
github.com/cpettitt/dagre-d3 implementuje diagram DOT w JavaScript. Możesz grać z demo na cpettitt.github.io/project/dagre-d3/latest/demo/… .
Arthur2e5