Skip to content

Instantly share code, notes, and snippets.

@tomshanley

tomshanley/.block

Created March 11, 2020 01:08
Show Gist options
  • Save tomshanley/a3add2805df7cff152d50839a567e672 to your computer and use it in GitHub Desktop.
Save tomshanley/a3add2805df7cff152d50839a567e672 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
</style>
</head>
<body>
<script>
console.clear()
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
var g = svg.append("g")
.attr("transform", "translate(50,50)")
var rect = g.append("rect")
.attr("x", 40)
.attr("y", 40)
.attr("width", 100)
.attr("height", 100)
.style("fill", "red")
var clientRect = rect.node().getBoundingClientRect()
console.log(clientRect)
var rectCRSVG = svg.append("rect")
.attr("x", clientRect.x)
.attr("y", clientRect.y)
.attr("width", clientRect.width)
.attr("height", clientRect.height)
.style("fill", "none")
.style("stroke", "pink")
var rectCRG = g.append("rect")
.attr("x", clientRect.x)
.attr("y", clientRect.y)
.attr("width", clientRect.width)
.attr("height", clientRect.height)
.style("fill", "none")
.style("stroke", "pink")
var bbox = rect.node().getBBox()
console.log(bbox)
var rectBBSVG = svg.append("rect")
.attr("x", bbox.x)
.attr("y", bbox.y)
.attr("width", bbox.width)
.attr("height", bbox.height)
.style("fill", "none")
.style("stroke", "pink")
var rectBBG = g.append("rect")
.attr("x", bbox.x)
.attr("y", bbox.y)
.attr("width", bbox.width)
.attr("height", bbox.height)
.style("fill", "none")
.style("stroke", "black")
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment