d3.js Ungerades Rotationsverhalten

Ich bin in der Anfangsphase eines JS-Projekts. Bis auf die Positionierung einer Form läuft alles gut. Die fragliche Form ist ein blaugrüner Diamant (Quadrat um 45 Grad gedreht). Ich kann das Quadrat problemlos auf dem Bildschirm anzeigen, aber wenn ich hinzufüge:

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

Das Quadrat dreht sich ordnungsgemäß, verschiebt sich jedoch in Richtung des linken Bildschirmbereichs wie folgt:

Ich bin mir nicht sicher, was dies verursacht. Wenn es hilft, ist hier ein Teil des Codes, der dieses Ergebnis hervorgebracht hat:

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 das Attribut "y" eingebe, verschwindet das Quadrat vollständig.

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

Antworten auf die Frage(3)

Ihre Antwort auf die Frage