d3.js Dziwne zachowanie rotacji

Jestem na wczesnym etapie projektu JS. Jak dotąd wszystko idzie dobrze, z wyjątkiem pozycjonowania jednego kształtu. Przedmiotowy kształt to turkusowy diament (kwadrat obrócony o 45 stopni). Nie mam problemu z wyświetleniem kwadratu na ekranie, ale kiedy dodam:

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

kwadrat obraca się prawidłowo, ale przesuwa się w kierunku lewej części ekranu, w ten sposób:

Nie jestem pewien, co to powoduje. Jeśli to pomoże, oto część kodu, który dał ten wynik:

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")

Uwaga: Jeśli ustawię atrybut „y”, kwadrat zniknie całkowicie.

Co to powoduje? Czy zrobiłem coś złego, którego po prostu nie widzę?

questionAnswers(3)

yourAnswerToTheQuestion