d3.js Odd Rotation Behavior

Я нахожусь на ранних стадиях проекта JS. Пока все идет нормально, за исключением позиционирования одной фигуры.Рассматриваемая форма представляет собой бирюзовый ромб (квадрат, повернутый на 45 градусов). Я могу вывести квадрат на экран без проблем, но когда я добавляю:

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

квадрат вращается правильно, но смещается в левую часть экрана, например:

Я не уверен, в чем причина этого . Если это поможет, вот часть кода, который дал этот результат:

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

Примечание: если я добавлю атрибут "y", квадрат полностью исчезнет.

Чем это вызвано? Я сделал что-то не так, чего просто не вижу?