Pytanie Skierowany acykliczny wykres za pomocą d3.js bez DOT


Próbuję narysować ukierunkowany acykliczny wykres za pomocą d3.js. Szukając układu, natknąłem się 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ę.


15
2017-09-23 05:35


pochodzenie




Odpowiedzi:


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.

Tutaj znajdziesz kilka przykładów dagre:

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.


30
2017-12-03 03:08



Dzięki Chris. Szczegółowo przestudiowałem Dagre, ale wciąż nie mam jasności co do kilku aspektów: 1. Czy potrafi 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? - A.G.
1) Może obsługiwać 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: cpettitt.github.io/project/dagre-d3/latest/demo/.... Alternatywnie możesz użyć HTML, uruchamiając etykietę z elementem HTML. Zobacz etykietę dla węzła A w tym przykładzie: cpettitt.github.io/project/dagre-d3/latest/demo/.... - Chris Pettitt
Dzięki Chris. To jest naprawdę pomocne. - A.G.
Dagre nie wydaje się już wspierany i używa d3v3. Czy są jakieś dobre alternatywy dla dagre? - Tucker
Na początku Dagre-d3 wyglądał obiecująco. Jednakże jest on uszkodzony na IE. Również, wydaje się, że zakopuje moc d3, nie używając właściwych praktyk kodowania d3. Na przykład możesz utworzyć etykietę HTML zamiast etykiety tekstowej, określając wyraźnie flagę HTML. Właściwa implementacja d3 pozwoli twoim węzłom być znacznikami svg, które w pełni kontrolujesz używając koncepcji enter / update / exit. - user3667349


Renderowanie ukierunkowanych acyklicznych wykresów (a właściwie podkreślanie właściwości ukierunkowania) jest domeną Sugiyama algorytmy układu.

Zasadniczo przypisują one 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 zwanego kropka, który 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 dostępny. Prawdopodobnie najbardziej kompleksowym rozwiązaniem dostępnym dla Javascript jest komercyjna implementacja algorytmu w języku YFiles biblioteka. Więc jeśli jest to scenariusz komercyjny, możesz rzucić okiem na odpowiadający mu scenariusz 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.


4
2017-09-23 06:49



Dzięki. Zasadniczo odstąpię od używania graphViz, ponieważ wymaga kompilacji dla każdego systemu operacyjnego, ale przyjrzę się yFiles. - A.G.
@AmitGupta: Skompilowana przez JavaScript wersja GraphViz nie musi oczywiście być "rekompilowana". 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. - A.G.
Próbowałem dagre, mxgraph, yFiles, Cytoscape i wielu innych. Najbardziej kompletną implementacją jest na pewno implementacja hierarchicznego układu yFiles. Chciałbym użyć tego layoutu z d3.js lub cytoscape, ale nie mogłem nic na ten temat znaleźć. Czy mógłbyś pomóc? - Simon S.
@SimonS. Biblioteki yFiles można używać nawet bez implementacji przeglądarki. Algorytmy mogą być uruchamiane "bez głowy", a wszystkie odpowiednie właściwości mogą odczytywać interfejs API i stosować go do wykresu d3. Inną opcją byłoby użycie implementacji przeglądarki yFiles i użycie renderingów węzła d3js. Skontaktuj się z zespołem wsparcia, aby uzyskać więcej informacji! - Sebastian