Ich habe dagre benutzt, um gerichtete Graphen zu zeichnen, aber ich versuche zu verstehen, wie svg, d3, dagre und graphlib voneinander abhängig sind. Grundsätzlich, wo man aufhört und das andere beginnt.
Ich werde versuchen, darauf hinzuweisen, was ich mit meinem begrenzten Verständnis sammeln könnte.
svg : (ist ein XML-basiertes Vektorbildformat, aber im Grunde genommen ist es ein HTML-Tag, mit dem Sie Kreise, Ellipsen, Rechtecke usw. zeichnen und dann das Element g verwenden können) um zwei oder mehr Formen zu gruppieren und Transformationen anzuwenden.
d3 : d3 ist eine JavaScript-Bibliothek, mit der Sie Daten mit svg kombinieren können. Also, anstatt SVG-Tags jedes Mal zu schreiben, verwenden Sie grundsätzlich Programmierung, Schleifen, Daten usw. und erstellen Svg-Code.
Wenn ich jetzt zu dagre, dagre-d3 und graphlib komme, habe ich ein Problem, vorausgesetzt, dass alles, was ich oben gesagt habe, einen Sinn ergibt:)
dagre, dagre-d3 Das sagt die Dagre-Seite " Dagre ist eine JavaScript-Bibliothek, die es einfach macht, gerichtete Diagramme auf der Client-Seite zu erstellen. Die d3-Bibliothek fungiert als Front-End für Dagre und bietet das tatsächliche Rendern mit D3. "
Kann mir bitte jemand das erklären? Also kann ich d3 Funktionen innerhalb dagre, dagre-d3 verwenden? Hmm..Ich bin schon verwirrt, können Sie mit einem Beispiel erklären, wie all diese Koexistenz existieren? Dieses Code-Snippet hat mich dazu gebracht zu denken:
%Vor%Hier ist drawNodes eine Funktion von dagre-d3, aber es wird überfahren und wir geben eine d3-Funktion ( d3.select (this) .classed ) darin. Hmm ... wie geht das vor? Ich dachte, dass d3.select nur für HTML-Elemente gemacht werden könnte? Was ist das hier?
graphlib : Dies ist die Graphlib-Seite, die angibt, dass sie Datenstrukturen für Multigraphen bereitstellt. Aber ich meine, sind diese Bibliotheken für d3 oder für dagre-d3 gebaut?
Ich weiß, ich klingt verwirrt, aber Sie bekommen es! Wenn mir jemand anhand eines Beispiels erklären könnte, wie diese zusammenhängen und welche Funktionen in welchen Funktionen verwendet werden können, kann ich sie abholen.
Danke.
graphlib stellt die Datenstruktur bereit, die das Diagramm darstellt. Es macht kein Layout oder Rendering. Das Folgende ist also reine Graphlib:
%Vor%dagre führt das Layout (x- und y-Positionierung) von Knoten durch, wobei die Knoten durch ein Graphlib-Diagramm dargestellt werden. Es wird nicht gerendert. Die meiste Zeit würdest du es nicht selbst nennen, außer du willst ein benutzerdefiniertes Rendering ohne dagre-d3 machen.
dagre-d3 verwendet dagre für das Layout und rendert es mit d3. Beachten Sie, dass dagre-d3 standardmäßig dagre und graphlib als dagreD3.dagre und dagreD3.graphlib enthält.
SVG ist das Ausgabeformat für d3. Es ist ein universelles Vektorgrafikformat, in das auch normales HTML eingebettet werden kann. Jeder SVG-Knoten ist auch ein DOM-Knoten. Deshalb funktioniert d3.select auch auf SVG-Knoten.
Das von Ihnen gepostete Snipplet scheint eine Nachbearbeitung durchzuführen, um Klassen auf den Knoten festzulegen. Das Beispiel, mit dem Sie verknüpft haben, scheint seither aktualisiert worden zu sein und enthält diesen Code nicht mehr.
Tags und Links javascript svg d3.js dagre-d3