Skip to content

Instantly share code, notes, and snippets.

@fogonwater

fogonwater/.block

Last active February 21, 2019 18:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fogonwater/7faa1f19796c8657061e7f8e6cbb32d8 to your computer and use it in GitHub Desktop.
Save fogonwater/7faa1f19796c8657061e7f8e6cbb32d8 to your computer and use it in GitHub Desktop.
Download ZIP
rotate box tests
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment