Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active October 7, 2023 20:01
Show Gist options
  • Save mbostock/4e3925cdc804db257a86fdef3a032a45 to your computer and use it in GitHub Desktop.
Save mbostock/4e3925cdc804db257a86fdef3a032a45 to your computer and use it in GitHub Desktop.
Download ZIP
Pan & Zoom III
Raw
.block
license: gpl-3.0
redirect: https://observablehq.com/@d3/zoom
Raw
README.md

This example demonstrates using d3-zoom to pan and zoom an SVG element by applying an SVG transform using transform.toString. The zoom behavior is applied to an invisible rect overlaying the SVG element; this ensures that it receives input, and that the pointer coordinates are not affected by the zoom behavior’s transform.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" 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 points = d3.range(2000).map(phyllotaxis(10));
var g = svg.append("g");
g.selectAll("circle")
.data(points)
.enter().append("circle")
.attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return d[1]; })
.attr("r", 2.5);
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.call(d3.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed));
function zoomed() {
g.attr("transform", d3.event.transform);
}
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