Javascript-Bibliothek zum Zeichnen des Abhängigkeitsdiagramms [geschlossen]
Ich möchte in der Lage sein, ein Abhängigkeitsdiagramm zu erzeugen, das zeigt, welche Softwarekomponente davon abhängig ist, welche Javascript-Bibliotheken verwendet.
Anforderungen:
- automatisches Layout von oben nach unten
- Pfeile zwischen Knoten
- Etiketten auf Pfeilen
- Knoten können benutzerdefinierte Bilder (Vektor oder Raster) sein
- Labels unter den Knoten, die ein gemischtes Format haben
Gut zu haben:
- Tooltips, um weitere Informationen zu Knoten zu erhalten
- Box-in-Box-Diagramm für Knoten (für Knoten, die aus anderen Knoten bestehen)
- generiert ziemlich schnell
Ich habe verschiedene Möglichkeiten untersucht:
- dagrejs scheint die Möglichkeiten für benutzerdefinierte Bildknoten zu fehlen. Bearbeiten: Mit HTML in den Knoten benutzerdefinierte Bilder funktionierten gut.
- jsplumgtoolkit scheint die Möglichkeit für das automatische Layout zu fehlen
- graphdracula scheint die Möglichkeit für ein Top-down-Abhängigkeitslayout und vielleicht auch für benutzerdefinierte Bilder zu fehlen
- vizjs hat sehr spärliche Dokumentation
3 Antworten
Ich denke, etwas mit d3.js ist die beste Wahl. Es ist ein bisschen einschüchternd (weil es so flexibel ist, gibt es Ihnen mehrere Möglichkeiten, die gleiche Aufgabe zu erfüllen, und es ist schwer, die Nachteile von einigen im Voraus zu kennen).
Das Baum-Layout könnte etwas ziemlich nah sein (eine Demo, wie man es benutzt) ist hier ).
Besuche webcola . Es ist ein Drop-In-Ersatz für das d3.js Force-Layout und unterstützt Layout-Einschränkungen, sodass Sie alle Kanten benötigen zeigen Sie nach unten nach Ihrer Anfrage.
In einem kommerziellen Kontext sollten Sie yFiles for HTML berücksichtigen:
Es scheint, dass alle Ihre Anforderungen erfüllt sind:
- automatisches Layout von oben nach unten: Die Implementierung des hierarchischen Layoutalgorithmus (Sugiyama-Stil) in der Bibliothek ist perfekt, um Abhängigkeiten zwischen Elementen zu visualisieren:
(Dieses Diagramm wurde automatisch mit der Bibliothek mithilfe von diese Online-Demo )
- Pfeile zwischen Knoten: Da es sich um eine generische Bibliothek zur Bearbeitung von Graphen handelt, werden natürlich Kanten mit Pfeil unterstützt.
- Beschriftungen für Pfeile: Sie können beliebig viele Beschriftungen an Kanten (Pfeile) und Knoten hinzufügen.
- Knoten können benutzerdefinierte Bilder (Vektor oder Raster) sein: yFiles verwendet im Kern SVG und bietet Standard-Stilimplementierungen für die Visualisierungen sowie die Möglichkeit, eigene benutzerdefinierte Visualisierungen hinzuzufügen
- Beschriftungen unter den Knoten, die ein gemischtes Format haben können: Beschriftungen können auch alles sein, was von SVG unterstützt wird (was sehr viel ist), so dass komplexe Textdarstellungen sowie Vektorgrafiken und Bitmaps in den Beschriftungen enthalten sein können gut.
- Tooltips, um weitere Informationen zu Knoten zu erhalten: Dies wird standardmäßig unterstützt. Tooltips können HTML-, CSS- und SVG / Canvas-Inhalte sein.
- Box-in-Box-Diagramm für Knoten (für Knoten, die aus anderen Knoten bestehen): Diese Funktion wird in der Bibliothek als "Knotengruppierung" bezeichnet und wird sowohl während der Bearbeitung als auch durch die automatischen Layout-Algorithmen unterstützt Sie können Ihre Abhängigkeiten in Gruppen wie "Komponenten von Drittanbietern", "OSS-Komponenten" usw. gruppieren. Sie können Gruppen auch in mehrere Ebenen verschachteln.
- generiert ziemlich schnell: Natürlich kann "ziemlich schnell" je nach Komplexität für den Benutzer noch lange dauern, aber die Layoutalgorithmen sollten in der Lage sein, ein Layout innerhalb weniger Sekunden zu erzeugen, selbst wenn es Dutzende davon gibt Elemente.
Es gibt eine Dokumentation, die online verfügbar ist .
Haftungsausschluss : Ich arbeite für das Unternehmen, das diese Bibliothek erstellt, aber auf SO stelle ich meinen Arbeitgeber nicht dar.
Tags und Links javascript dependencies diagram graphviz jsplumb