Skip to content

Instantly share code, notes, and snippets.

@mwdchang

mwdchang/index.html

Last active July 13, 2016 15:06
Show Gist options
  • Save mwdchang/a88aa3f61f5a2243d15bb8a264aa432e to your computer and use it in GitHub Desktop.
Save mwdchang/a88aa3f61f5a2243d15bb8a264aa432e to your computer and use it in GitHub Desktop.
Download ZIP
D3 v4 odd zoom behaviour
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
#div1 {
width: 500px;
height: 500px;
background: #CCC;
}
#div2 {
width: 300px;
height: 300px;
border: 2px solid #369;
background: #EEE;
transform: translate(100px, 100px);
-webkit-transform: translate(100px, 100px);
}
.zoom-layer {
fill: #EEE;
fill-opacity: 0.25;
}
</style>
</head>
<body id="demo">
<p>Zoom in on the circle</p>
<div id="div1">
<div id="div2">
<svg width="100%" height="100%" viewBox="0 0 300 300">
<g>
<circle cx=100 cy=100 r=20 style="fill:#F22"></circle>
</g>
<rect x=0 y=0 width=300 height=300 class="zoom-layer"></rect>
</svg>
</div>
</div>
</body>
<script>
var zoom = d3.zoom()
.scaleExtent([1, 100])
.on('zoom', zoomFn);
function zoomFn() {
d3.select('#div2').select('svg').select('g')
.attr('transform', 'translate(' + d3.event.transform.x + ',' + d3.event.transform.y + ') scale(' + d3.event.transform.k + ')');
}
d3.select('#div2').select('svg').select('rect').call(zoom);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment