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

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
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