Zeichne Blöcke, die gedreht und mit d3.js gefliped werden

Ich muss ein Diagramm erstellen, das aus einer Hierarchie von Blöcken besteht (ein großer Block, der kleinere Blöcke enthält, die andere Blöcke enthalten).

Die Daten sind eine Hierarchie dieser Blöcke

Jeder Block hat eine Geometrie (Anordnung von Kanten) und eine Ausrichtung:

• keine Orientierung
• kippen Sie auf X (kippen Sie um die Mitte des Begrenzungsrahmens auf der X-Achse)
• kippe auf y (kippe um die Mitte des Begrenzungsrahmens auf der Y-Achse)
• um 90 Grad drehen (um den Ursprungspunkt um 90 Grad drehen)
• 180 Grad

Die Koordinaten der Kanten sind relativ zum Ursprung des Elternblocks.

Wenn also der Hauptblock gedreht wird, wird auch das Koordinatensystem des Unterblocks gedreht.

Ich muss dies zeichnen und dann die Füllfarbe jedes Blocks basierend auf Metriken ändern.

Die Art und Weise, wie ich es jetzt gemacht habe, besteht darin, diese Hierarchie rekursiv zu analysieren und für jedes Element svg-Elemente anzuhängen:

Dies hilft bei der gesamten Vererbung von Koordinaten, da ich innerhalb bereits rotierter Gruppen zeichne.

Ich bin nicht sicher, dass dies der beste Weg ist, da ich nicht die .data () append () enter () -Funktionen verwende, weil ich nicht weiß, wie man Schuppenelemente zeichnet. Die Blöcke haben auch Etiketten und einen Indikator, wo ihre Herkunft ist, aber ich habe dies nicht zur Vereinfachung hinzugefügt.

Gibt es einen besseren Weg, dies zu tun?

Danke!