This example demonstrates using d3-zoom to enable interactive panning and zooming of a Canvas element. The current zoom transform is applied to the Canvas using context.translate and context.scale. This technique is similar to applying an SVG transform. An alternate zooming strategy is to transform the data rather than the view; this lets you customize the display on zoom, such as rendering circles that are the same size regardless of scale.
Last active
August 12, 2019 04:07
-
-
Save mbostock/d1f7b58631e71fbf9c568345ee04a60e to your computer and use it in GitHub Desktop.
Pan & Zoom 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
| license: gpl-3.0 | |
| redirect: https://observablehq.com/@d3/zoom-canvas |
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"> | |
| <canvas width="960" height="500"></canvas> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var canvas = d3.select("canvas"), | |
| context = canvas.node().getContext("2d"), | |
| width = canvas.property("width"), | |
| height = canvas.property("height"), | |
| radius = 2.5; | |
| var points = d3.range(2000).map(phyllotaxis(10)); | |
| canvas.call(d3.zoom() | |
| .scaleExtent([1 / 2, 4]) | |
| .on("zoom", zoomed)); | |
| drawPoints(); | |
| function zoomed() { | |
| context.save(); | |
| context.clearRect(0, 0, width, height); | |
| context.translate(d3.event.transform.x, d3.event.transform.y); | |
| context.scale(d3.event.transform.k, d3.event.transform.k); | |
| drawPoints(); | |
| context.restore(); | |
| } | |
| function drawPoints() { | |
| context.beginPath(); | |
| points.forEach(drawPoint); | |
| context.fill(); | |
| } | |
| function drawPoint(point) { | |
| context.moveTo(point[0] + radius, point[1]); | |
| context.arc(point[0], point[1], radius, 0, 2 * Math.PI); | |
| } | |
| function phyllotaxis(radius) { | |
| var theta = Math.PI * (3 - Math.sqrt(5)); | |
| return function(i) { | |
| var r = radius * Math.sqrt(i), a = theta * i; | |
| return [ | |
| width / 2 + r * Math.cos(a), | |
| height / 2 + r * Math.sin(a) | |
| ]; | |
| }; | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment