Estoy en las primeras etapas de un proyecto JS. Todo va bien hasta ahora, excepto por el posicionamiento de una forma. La forma en cuestión es un diamante verde azulado (cuadrado girado 45 grados). Puedo obtener el cuadrado en la pantalla sin problemas, pero cuando agrego:

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

el cuadrado gira correctamente, pero se desplaza hacia la parte izquierda de la pantalla, de esta manera:

No estoy seguro de lo que está causando que esto suceda. Si ayuda, aquí está algo del código que produjo este resultado:

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

Nota: Si pongo el atributo "y" en, el cuadrado desaparece por completo.

¿Qué está causando esto? ¿Hice algo mal que no puedo ver?