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.
Last active
April 7, 2017 09:59
-
-
Save puzzler10/ce2bd030e37bae0285815c22c5e52b52 to your computer and use it in GitHub Desktop.
Simple Zoom Example v4 I
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment