rotate box tests

hello markdown

forked from davidwatkins73's block: rotate box

forked from fogonwater's block: rotate box tests 1

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <body>
    <svg width="960" height="960"></svg>
  
<script>
console.clear()
const svg   = d3.select("svg"),
  		width = +svg.attr("width"),
  		height= +svg.attr("height"),
      data = [
        {x:100, y:100, w:180, h:320, rot:20},
        {x:400, y:100, w:120, h:60, rot:-20},
        {x:400, y:300, w:120, h:120, rot:45}
      ]

svg.selectAll('.baseRect')
  	.data(data)
  .enter().append('rect')
    .attr('x', d => d.x)
    .attr('y', d => d.y)
    .attr('width', d => d.w)
    .attr('height', d => d.h)
    .style('fill', 'whitesmoke')
    .style('stroke', 'darkgray')

svg
  .selectAll(".rotateRect")
  	.data(data)
  .enter().append("rect")
    .attr("x", d => d.x)
    .attr("y", d => d.y)
    .attr('width', d => d.w)
    .attr('height', d => d.h)
    .style("fill", "none")
    .style("stroke", "black")
    .attr(
      "transform",
      d => "rotate(" + d.rot + ", " + (d.w / 2 + d.x) + ", " + (d.h / 2 + d.y) + ")"
    );

</script>
</body>

https://d3js.org/d3.v5.min.js