Biblioteka JS do wyświetlania bezpośrednich wykresów acyklicznych (DAG)

Question

Próbuję utworzyć narzędzie oparte na przeglądarce, które umożliwia sprawdzenie wykresów zależności, tak jak pojawiają się one w systemach modułowych języków programowania i plikach Makefile.

Szukam ramy wizualizacji, która wykonuje rysunek dla mnie.

Wymagania są takie, że zestaw narzędzi może

• węzły etykiet (i miejmy nadzieję krawędzie)
• automatycznie przestrzeń na wykresie po prawej wielkości (nie muszę zgadywać dobre wymiary) zważywszy, że I nie Infinit przestrzeń (paski przewijania są w porządku)
• układ wykres ładnie tak, że nie wygląda jak brudny
• być w porządku z < = 5000 węzłów
• prowadzony tylko JS (bez Fl popiołu lub aplikacje desktopowe)

Opcjonalnie, byłoby miło, gdyby to sprawiło, że łatwo poruszać się wokół węzłów i podkreślić lub ukryć części wykresu dla lepszej orientacji.

Nie ma znaczenia, co jest używane (SVG, płótno, wszystko w porządku).

Mam spojrzał na dość kilka bibliotek do tej pory (w szczególności z Graph visualization library in JavaScript), ale nie znalazł nałożonych jeszcze:

• d3 jest ładny, ale tylko węzeł-wykres dostarcza wykres siła, który koncentruje się na fizyce czasu rzeczywistego. Po załadowaniu musisz poczekać i poczekać, aż silnik fizyki się ustabilizuje. Nie potrzebuję animacji ani Mocy i chcę od razu pokazać wykres.
• 's tosą prawie tym, czego szukam, ale już z 70 węzłami i 400 krawędziami, wydajność rysowania staje się naprawdę zła. Ma również bardzo mały numer documentation (będący przykładem 35-liniowego kodu).

Czy znasz coś, co spełnia moje wymagania? Dzięki!

Answer 1

Dagre działa całkiem dobrze w przypadku układu graficznego (wyrównanie w poziomie/w pionie, etykiety itp.) I ma mechanizm renderowania D3.

https://github.com/cpettitt/dagre-d3 (sprawdź obrazów na końcu)

https://github.com/cpettitt/dagre

Answer 2

W scenariuszu komercyjnych może warto rozważyć yFiles for HTML:

Odnośnie wymagań może on:

• Dodaj dowolny liczba etykiet do węzłów i krawędzi
• P rovide wirtualnie nieskończone obszar przewijania/przesuwania/powiększania
• Układaj wykres automatycznie za pomocą różnych algorytmów automatycznego układania. W przypadku wykresów zależności, Hierarchic Layouter jest bardzo dobrze przystosowany do pracy w przeglądarkach komputerowych z większą liczbą węzłów.W zależności od złożoności wizualnej i struktury wykresu, 5000 elementów może się jednak utrudnić przy dzisiejszych implementacjach przeglądarki.
• To czysta biblioteka JavaScript bez zależności cokolwiek
• Używa SVG jako głównego zaplecza, ale można również wykorzystać płótno
• Biblioteka jest well documented, co jest konieczne ze względu na jego złożoność

Oto zrzut ekranu pokazano niektóre z powyższych cech w działaniu - układ został obliczony automatycznie:

Zrzeczenie się odpowiedzialności: Pracuję dla firmy, która tworzy bibliotekę. Na SO/SE nie reprezentuję mojego pracodawcy. To jest mój własny post.