I'm in the early stages of a JS project. Everything is going fine so far except for the positioning of one shape. The shape in question is a teal diamond (square rotated 45 degrees). I can get the square on the screen no problem, but when I add:

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

the square rotates properly, but shifts towards the left portion of the screen, like this:

enter image description here

I am not sure what is causing this to happen. If it helps, here is some of the code that produced this result:

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

Note: If I put the "y" attribute in, the square disappears completely.

What is causing this? Did I do something wrong that I just can't see?

javascript d3.js
Edit
Report