Testing zoom and panning in d3.js with both mouse and touch interactions.
sources:
Last active
August 29, 2015 14:10
-
-
Save eesur/c8ddc916e07af6e0481a to your computer and use it in GitHub Desktop.
d3 | zoom and panning
This file contains hidden or 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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Zooming and Panning</title> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <style> | |
| body { font-family: monospace; line-height: 160%; font-size: 18px; max-width: 80%; margin: 0;} | |
| svg { border: 1px dotted black;} | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| // colour vars | |
| var tcYellow = "#FDBB30", tcBlack = "#130C0E", tcPink = "#EC008C", tcRed = "#EE3124", tcOrange = "#F47521", tcGreen = "#7AC143", tcBlue = "#00B0DD"; | |
| // generic vars | |
| var width = 940, height = 450, r = 50; | |
| var data = [ | |
| [width / 2 - r, height / 2 - r], | |
| [width / 2 - r, height / 2 + r], | |
| [width / 2 + r, height / 2 - r], | |
| [width / 2 + r, height / 2 + r] | |
| ]; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .call( | |
| d3.behavior.zoom() | |
| .scaleExtent([1, 10]) | |
| .on("zoom", zoom) | |
| ) | |
| .append("g"); | |
| svg.selectAll("circle") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("r", r) | |
| .attr("fill", function (d, i) { | |
| switch (i) { | |
| case 0: return tcYellow; | |
| break; | |
| case 1: return tcGreen; | |
| break; | |
| case 2: return tcRed; | |
| break; | |
| case 3: return tcOrange; | |
| break; | |
| default : return tcBlue; | |
| } | |
| }) | |
| .attr("transform", function (d) { | |
| return "translate(" + d + ")"; | |
| }); | |
| function zoom() { | |
| svg.attr("transform", "translate(" | |
| + d3.event.translate | |
| + ")scale(" + d3.event.scale + ")"); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment