Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Nov 7, 2016
Embed
What would you like to do?
Fixed Zoom
license: gpl-3.0

In this example of d3-zoom, the transform’s translate x and y are ignored; only the scale k is observed, allowing zooming around a fixed focal point. The focal point in world coordinates is represented by the variables fx and fy. The view is translated such that this point appears at the middle of the display.

<!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)),
fx = points[0][0],
fy = points[0][1];
var zoom = d3.zoom()
.scaleExtent([1 / 2, 96])
.on("zoom", zoomed);
canvas
.call(zoom)
.call(zoom.transform, d3.zoomIdentity);
function zoomed() {
var t = d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(d3.event.transform.k)
.translate(-fx, -fy);
context.save();
context.clearRect(0, 0, width, height);
context.translate(t.x, t.y);
context.scale(t.k, t.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