Comportamento de rotação ímpar de d3.js

Estou nos estágios iniciais de um projeto JS. Tudo está indo bem até agora, exceto pelo posicionamento de uma forma. A forma em questão é um diamante verde-azulado (quadrado girado 45 graus). Eu posso pegar o quadrado na tela sem problema, mas quando eu adiciono:

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

o quadrado gira corretamente, mas muda para a parte esquerda da tela, assim:

Não tenho certeza do que está causando isso. Se isso ajudar, aqui está um pouco do código que produziu esse 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: Se eu colocar o atributo "y", o quadrado desaparece completamente.

O quê está causando isto? Eu fiz algo errado que simplesmente não consigo ver?

questionAnswers(3)

yourAnswerToTheQuestion