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?