d3.js Ungeradzahliges Rotationsverhalten
Ich bin in einem frühen Stadium eines JS-Projekts. Alles läuft gut bis auf die Positionierung einer Form. Die fragliche Form ist ein teal Diamant (Quadrat um 45 Grad gedreht). Ich kann das Quadrat auf dem Bildschirm kein Problem, aber wenn ich hinzufügen:
%Vor%Das Quadrat rotiert richtig, verschiebt sich jedoch in Richtung des linken Teils des Bildschirms:
Ich bin mir nicht sicher, was das verursacht. Wenn es hilft, hier ist ein Teil des Codes, der dieses Ergebnis produziert:
%Vor%Hinweis: Wenn ich das Attribut "y" einfüge, verschwindet das Quadrat vollständig.
Was verursacht das? Habe ich etwas falsch gemacht, dass ich einfach nicht sehen kann?
3 Antworten
Wenn Sie das Rechteck drehen, drehen Sie auch das Koordinatensystem. Wenn Sie es später 250 entlang der X-Achse bewegen, bewegen Sie es tatsächlich 250 Einheiten entlang einer 45-Grad-Achse - das Ergebnis der Drehung.
Wenn Sie ein transform -Attribut einführen, wie Sie es für rotate getan haben, sollten Sie die gesamte Transformation über dieses Attribut durchführen. Daher müssen Sie translate anstelle des Attributs "x" verwenden. Dann würde es so aussehen:
Das bringt Ihnen die Ergebnisse, die Sie suchen. Beachten Sie, dass die Reihenfolge der Transformationen hier von Bedeutung ist: Wenn Ihre Transformation "rotate(45) translate(250, 0)" war (d. H. Zuerst rotieren und dann übersetzen), erhalten Sie die gleichen, falschen Ergebnisse, die Sie zuvor erhalten haben. Das liegt daran, dass beim ersten Drehen die Übersetzung wie zuvor entlang einer gedrehten X-Achse erfolgt.
In SVG müssen Sie den Transformationsursprung so einstellen, dass er sich von der Mitte aus dreht, z. B. ...
%Vor% Dabei ist 250, 100 die x- und y-Position Ihres rect minus seines Radius. Alles zusammen würde es aussehen wie ...
Sie können eine Demo hier anzeigen:
Hier ist ein Ansatz, der sich etwas von der Antwort unterscheidet, die Duopixel gegeben hat. Hier wiederholen Sie nicht die Berechnungen für X und Y. In Duopixels Beispiel ist das eine triviale Verbesserung, da er lediglich auf eine Struktur verweist. Es ist oft der Fall, dass X und Y Funktionen sind und ich möchte das Logging nicht an zwei Stellen beibehalten. Mit dieser Methode können Sie X und Y als Knoten definieren und dann in der Mitte des Knotens rotieren.
Sie können feststellen, dass Sie nach der Drehung immer noch die endgültige Position optimieren möchten, was mit einer anderen Transformation möglich ist, oder im Fall von TEXT können Sie dx, dy.
verwenden %Vor%Tags und Links javascript d3.js