2012-07-26 7 views
14

Ich habe einen leicht modifizierten Baum mit dem Baum-Layout gemacht. Ich musste den Baum von rechts nach links ausrichten anstatt der regulären Ausrichtung von links nach rechts, die standardmäßig verwendet wird. Was ist der richtige und richtige Weg, dies zu tun?Baum Zeichenausrichtung

Ich endete damit, indem ich einfach die X-Koordinate nach dem Erstellen des Layouts invertiert, aber ich fühle, dass dies ein Hack ist. Sicherlich gibt es etwas Eleganteres?

Ich dachte über eine SVG-Drehung um das Zentrum nach, aber dann müsste ich die Etiketten drehen, um den Text richtig herum zu bekommen. Das hat sich auch nicht gut angefühlt.

+0

Beitrag einige Code. – Wex

Antwort

27

Der Baumlayout berechnet Knotenpositionen in einen willkürlichen Koordinatenraum der Breite ( x) und Tiefe (y). Um die Ausrichtung des Layouts zu ändern, ändern Sie die Zuordnung vom Koordinatenraum des Layouts in SVG-Pixelkoordinaten. Wenn Sie das Mapping nicht manuell vornehmen möchten, können Sie quantitative scales verwenden, um ein intuitiveres (aber ausführlicheres) Mapping anzugeben.

Hier ist ein Beispiel vier verschiedenen Ausrichtungen zeigt:

+0

Es gibt einen Bug/Tippfehler in Zeile 26: "http:" fehlt vor dem Link –

+0

Kannst du bitte weiter erklären? Ich habe durchschnittliches HTML- und JS-Wissen und eine funktionierende Anwendung (erweiterbarer/anklickbarer Baum von links nach rechts), und ich würde es gerne von oben nach unten machen. –

+0

Ich habe x und y an zwei Stellen in productTree.js geändert, eine hat die Baumstruktur vertikal gemacht und die andere hat die Beschriftungen an der richtigen Stelle gemacht. Leider bekommt der Baum keine Grenzen, daher sind die Beschriftungen übereinander: / –