d3.js Odd Rotation Verhalten

Question

Ich bin in den frühen Phasen 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 den Platz auf dem Bildschirm kein Problem, aber wenn ich hinzufügen:

.attr("transform", "rotate(45)") 

das Quadrat dreht richtig, sondern verschiebt sich in Richtung des linken Teil des Bildschirms, wie folgt aus:

Ich bin mir nicht sicher, was das verursacht. Wenn es hilft, ist hier ein Teil des Codes, der dieses Ergebnis geführt:

var svg = d3.select("body") 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h); 
     svg 
      .append("rect") 
      .attr("transform", "rotate(45)") 
      .attr("x", 250) 
      .attr("height", w/10) 
      .attr("width", w/10) 
      .attr("fill", "teal") 

Hinweis: Wenn ich die „y“ in Attribute gesetzt, verschwindet das Quadrat vollständig.

Was verursacht das? Habe ich etwas falsch gemacht, das ich einfach nicht sehen kann?

Answer 1

Wenn Sie das Rect rotieren, drehen Sie auch sein 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.

In der Regel, wenn Sie ein transform Attribut wie Sie für rotate eingeführt haben, sollten Sie alle Ihre Transformation über dieses Attribut tun. Sie müssen also translate anstelle des Attributs "x" verwenden. Dann würde es so aussehen:

svg 
    .append("rect") 
    .attr("transform", "translate(250, 0) rotate(45)") 
    // remove this: .attr("x", 250) 
    .attr("height", w/10) 
    ... 

Dies bringt Sie die Ergebnisse, die ich denke, 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.

Answer 2

In SVG müssen Sie den Ursprung Transformation gesetzt, um es von der Mitte zu drehen zu bekommen, wie ...

.attr("transform", "rotate(45, 250, 100)"); 

Wo 250, 100 ist die x- und y-Position Ihres rect minus es ist Radius. Dass sie alle zusammen würde es aussehen ...

var svg = d3.select("body") 
      .append("svg") 
      .attr("width", 400) 
      .attr("height", 300); 
     svg 
      .append("rect") 
      .attr("transform", "rotate(30,"+ (diamond.x+diamond.width/2) + ","+ (diamond.y+diamond.width/2) +")") 
      .attr("x", diamond.x) 
      .attr("y", diamond.y) 
      .attr("height", diamond.width) 
      .attr("width", diamond.width) 
      .attr("fill", "teal")​ 

können Sie eine Demo sehen hier:

http://jsfiddle.net/uwM8u/

Answer 3

hier ein Ansatz unterscheidet sich etwas von der Antwort Duopixel gab. 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 diesem Ansatz können Sie X und Y als Knoten festlegen und dann in der Mitte des Knotens rotieren.

Sie können feststellen, dass Sie nach der Drehung 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.

svgNode.attr("transform", function (d) { 

        var w = +d3.select(this).attr("x") + (this.getBBox().width/2) ; 
        var h = +d3.select(this).attr("y") + (this.getBBox().height/2); 

        return "rotate(90," + w + "," + h + ")"; 

       })