Two circles on the page. Try scrolling the mouse wheel on the left circle, then try on the right circle.
Click here for the explanation behind the code, or here for a list of zoom tutorials.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
</style> | |
<svg width="800" height="500"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var svg = d3.select("svg"), | |
width = +svg.attr("width"), | |
height = +svg.attr("height"); | |
var radius = 30; | |
var circle1 = {x: 200, y: height /2 } ; | |
var circle2 = {x: 600, y: height /2 } ; | |
var circle1 = svg.append("circle") | |
.attr("cx", circle1.x) | |
.attr("cy", circle1.y) | |
.attr("r", radius) | |
.attr("fill", "blue"); | |
var circle2 = svg.append("circle") | |
.attr("cx", circle2.x) | |
.attr("cy", circle2.y) | |
.attr("r", radius) | |
.attr("fill", "blue"); | |
//define zoom behaviour | |
var zoom_handler = d3.zoom() | |
.on("zoom", zoom_actions); | |
zoom_handler(circle2); | |
function zoom_actions(){ | |
var transform = d3.zoomTransform(this); | |
// same as this.setAttribute("transform", "translate(" + transform.x + "," + transform.y + ") scale(" + transform.k + ")"); | |
this.setAttribute("transform", transform) | |
} | |
</script> |