Ich bin sehr neu bei d3.js (und SVG im Allgemeinen), und ich möchte etwas Einfaches tun: ein Baum / Dendrogramm mit gewinkelten Konnektoren.
Ich habe das d3-Beispiel von hier aus kannibalisiert: Ссылка und ich möchte es mehr wie die protovis Beispiele hier machen:
Ich habe hier einen Anfang gemacht: Ссылка und ich denke, es ist der folgende Ausschnitt, der falsch ist:
%Vor% Allerdings gibt es keinen offensichtlichen Ersatz, ich könnte d3.svg.line verwenden, aber ich weiß nicht, wie ich es richtig integrieren soll, und idealerweise hätte ich gerne einen Ellenbogenstecker ... obwohl ich mich frage, ob ich den falsche Bibliothek dafür, da viele der d3-Beispiele, die ich gesehen habe, die Gravitationskraft verwenden, um Graphen von Objekten anstelle von Bäumen zu erstellen.
Ersetzen Sie die Funktion diagonal durch einen benutzerdefinierten Pfadgenerator, indem Sie die "H" und "V" von SVG verwenden Pfadbefehle .
Beachten Sie, dass die Koordinaten von Quelle und Ziel ( x und y ) vertauscht sind. In diesem Beispiel wird das Layout mit einer horizontalen Ausrichtung angezeigt. Das Layout verwendet jedoch immer dasselbe Koordinatensystem: x ist die Breite des Baums und y ist die Tiefe des Baums . Wenn Sie also den Baum mit den (untersten) Blattknoten am rechten Rand anzeigen möchten, müssen Sie x und y austauschen. Das ist, was die Projektionsfunktion der Diagonale tut, aber in der obigen Ellbogen-Implementierung habe ich das Verhalten nur hart-codiert, anstatt eine konfigurierbare Funktion .
Wie in:
%Vor%Und ein funktionierendes Beispiel:
Tags und Links javascript svg d3.js dendrogram