Próbuję narysować ukierunkowany acykliczny wykres za pomocą d3.js. Podczas wyszukiwania układu natrafiłem na Dagre, ale wydaje się, że jest mniej użyteczny, ponieważ nie chcę używać kodu opartego na DOT w dowolnym miejscu. Jeśli ktokolwiek wie o czystym rozwiązaniu Javascript dla tego lub wtyczce/niestandardowym układzie dla DAG, proszę dać mi znać. Z góry dziękuję.Skierowany acykliczny wykres za pomocą d3.js bez DOT
Autor Dagre tutaj. Dagre nie zawiera żadnego kodu graphviz - jest to czysty JavaScript. Opiera się jednak na podobnych technikach układania; oba oparte są na technikach z papieru Sugiyama.
Można znaleźć kilka przykładów dagre tutaj:
http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html http://cpettitt.github.io/project/dagre-d3/latest/demo/sentence-tokenization.html http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html
minified źródło można znaleźć tutaj: http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js. Osiąga około 44K.
Renderowanie ukierunkowanych wykresów acyklicznych (a właściwie podświetlanie właściwości ukierunkowania) jest domeną algorytmów układu Sugiyama.
Po prostu przypisują warstwy (poprzez sortowanie topologiczne) do węzłów, a następnie obliczają sekwencję dla węzłów w warstwach. Korzystanie z prostych heurystycznych do odwrotnych cykli jako pierwszych działa dobrze również w przypadku wykresów cyklicznych. Graphviz DOT ma implementację tego układu o nazwie dot, która jest również nazwą formatu pliku, którego używa, więc czasami pojawia się pewne zamieszanie, gdy wspomniano o DOT.
Oczywiście istnieją inne implementacje algorytmu, nawet skompilowana krzyżowo wersja JavaScript kropki to available. Prawdopodobnie najbardziej kompleksowym rozwiązaniem dostępnym dla Javascript jest komercyjna implementacja algorytmu w bibliotece yFiles. Więc jeśli jest to scenariusz komercyjny, możesz rzucić okiem na odpowiadający mu live demo. Zauważ, że chociaż yFiles ma własną implementację renderowania i edytora, możesz nadal podłączyć kod do d3.js, ponieważ algorytmy układu mogą być używane jako samodzielne implementacje do "justowania" współrzędnych węzłów, punktów połączenia krawędzi, łuki i etykiety. Ta specyficzna implementacja obsługuje wiele dodatkowych ograniczeń, takich jak "Ograniczenia portów" (w celu ograniczenia kierunku wychodzących i przychodzących krawędzi, jak również ich dokładnych lokalizacji w węzłach), hierarchicznie zgrupowane węzły (gdzie każdy węzeł może mieć węzeł nadrzędny a węzeł nadrzędny "zawiera" wszystkie jego węzły podrzędne), ograniczenia warstwy i sekwencji, ograniczenia etykietowania krawędzi, różne style trasowania krawędzi, trasowanie magistrali i inne.
Ujawnienie: Pracuję dla firmy, która tworzy wspomnianą bibliotekę, jednak na SO nie reprezentuję mojego pracodawcy.
Dzięki. Zasadniczo odstąpię od używania graphViz, ponieważ wymaga kompilacji dla każdego systemu operacyjnego, ale przyjrzę się yFiles. –
@AmitGupta: Skompilowana przez JavaScript wersja GraphViz nie musi być oczywiście "przekompilowana". Nadal jednak wydaje się być ogromnym binarnym blobem w przeglądarce - nie ma prawdziwego API, ale bardziej przypomina aplikację konsolową, nawet w przeglądarce. – Sebastian
Tak. Zgadzam się. Wydaje się, że istnieje potrzeba niestandardowego układu. –
Dzięki Chris. Szczegółowo przestudiowałem Dagre, ale wciąż nie mam jasności co do kilku aspektów: 1. Czy może obsłużyć cykle na wykresie, a nie duże ograniczenie? 2. Czy mogę mieć ikony zamiast podstawowych kształtów w układzie graficznym? –
1) Obsługuje wykresy z cyklami. 2) Nie ma specjalnego traktowania dla kształtów innych niż prostokąty. Można jednak zastąpić funkcję, która rysuje kształt węzła: (renderer.drawNode (yourDrawNode)). Możesz zobaczyć przykład, jak to działa tutaj: http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html. Alternatywnie możesz użyć HTML, uruchamiając etykietę z elementem HTML. Zobacz etykietę dla węzła A w tym przykładzie: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html. –
Dzięki Chris. To jest naprawdę pomocne. –