rotate box tests

hello markdown

forked from davidwatkins73's block: rotate box

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
   <body>
  
  <svg width="960" height="960"></svg>
  
<script>
const svg   = d3.select("svg"),
  		width = +svg.attr("width"),
  		height= +svg.attr("height"),
			data = [{x:400, y:100}, {x:500, y:300}],
      r_wide = 100,
      r_high = 60

svg.selectAll('.bars1')
  	.data(data)
  .enter().append('rect')
    .attr('x', d => d.x)
    .attr('y', d => d.y)
    .attr('width',  r_wide)
    .attr('height',  r_high)
    .attr('opacity', .75)
    .style('fill', '#fef8c1')
    .style('stroke', '#999')
    .attr('transform', 
          (d) => 'rotate(-20, ' + (r_wide/2 + d.x) +', ' + (r_high/2 + d.y) +')'
    )

svg.selectAll('.bars2')
  .data(data)
  .enter().append('rect')
  .attr('x', (d) => d.x)
  .attr('y', (d) => d.y)
  .attr('width',  r_wide)
  .attr('height',  r_high)
  .attr('opacity', .75)
  .style('fill', 'none')
	.style('stroke', '#444')
 
svg.append("g")
	.attr("transform", "translate(100, 200)")
  .append('rect')
  .attr({
    x: 0, 
    y: 0, 
    width: 200, 
    height: 100, 
    stroke:'#999',
    fill: '#fedcc2'
  })
  .attr('transform', 'rotate(-25, 100,50)')

svg.append("g")
	.attr("transform", "translate(100, 200)")
  .append('rect')
  .attr({
    x: 0, 
    y: 0, 
    width: 200, 
    height: 100, 
    stroke:'#444',
    fill: 'none'
  })

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js