2a:["$","title",null,{"children":"Zoom snap to nearest point (#212) | D3 | Observable"}] 2f:T900,chart = { let focussed; function findCloser(that, coords) { const p = d3.zoomTransform(that).invert(coords); focussed = quadtree.find(p[0], p[1]); return d3.zoomTransform(that).apply(focussed); } const zoom = d3 .zoom() .scaleExtent([1, 40]) .on("zoom", zoomed) .center(function(event, d) { mutable debug = { event, d, r: Math.random() }; let coords = d3.pointer(event, this); focussed = null; if (event.deltaY < 0) { coords = findCloser(this, coords); } g.selectAll("circle").attr("r", p => p == focussed ? radius + 3 : radius ); return coords; }); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .on("click", reset); const g = svg.append("g"); g.selectAll("circle") .data(data) .join("circle") .attr("cx", ([x]) => x) .attr("cy", ([, y]) => y) .attr("r", radius) .attr("fill", (d, i) => d3.interpolateRainbow(i / 360)) .on("click", clicked); svg.datum("I'm your worst datum").call(zoom); //.on("mousemove", mousemove); function random() { const [x, y] = data[Math.floor(Math.random() * data.length)]; svg .transition() .duration(2500) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(40) .translate(-x, -y) ); } function reset() { svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function clicked(event, [x, y]) { event.stopPropagation(); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(40) .translate(-x, -y), d3.pointer(event, svg.node()) ); } function zoomed(event) { g.attr("transform", event.transform); } return Object.assign(svg.node(), { zoomIn: () => svg .transition() .call(zoom.scaleBy, 2, findCloser(svg.node(), [width / 2, height / 2])), zoomOut: () => svg.transition().call(zoom.scaleBy, 0.5), zoomRandom: random, zoomReset: reset }); }30:[{"id":"ce5557fac75154835a16831d5203b29d8e538c9b9e6158c7d5eed2d2bf2a3900a39ab59c0c07e3ee26678fc371c8d3b86db36840cabc2ddfb7bdc046c248f9d2","href":"https://static.observableusercontent.com/files/ce5557fac75154835a16831d5203b29d8e538c9b9e6158c7d5eed2d2bf2a3900a39ab59c0c07e3ee26678fc371c8d3b86db36840cabc2ddfb7bdc046c248f9d2","name":"d3-zoom.min.js","type":"application/javascript","lastModified":1685467339455.394,"size":10189}] 2d:{"id":"9035ed7049aaa8c6","slug":"zoom-snap-to-nearest-point-212","title":"Zoom snap to nearest point (#212)","thumbnail":"4d1885ee0a0b80d740ccbd7dc07d0e9de99c7c6eb5275cc3ef3c3fe7742de480","access_level":"unlisted","create_time":"$D2020-07-13T07:49:12.902Z","update_time":"$D2023-05-30T17:22:38.073Z","view_time":null,"first_public_time":null,"fork":{"id":"af0c925c9fb168f3","slug":null,"title":"Zoom snap to nearest point","owner":{"id":"dbaac3ef74ea8f0c","login":"cpietsch","name":"Christopher Pietsch"}},"stars":2,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":304,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"0aa89a77ae1b7b5d","slug":"d3-zoom","title":"d3-zoom","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"title":"Zoom snap to nearest point (#212)","cells":[{"id":0,"value":"md`# Zoom snap to nearest point ([#212](https://github.com/d3/d3-zoom/pull/212))\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"mutable debug = undefined","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"{\n const form = html``;\n form.in.onclick = () => chart.zoomIn();\n form.out.onclick = () => chart.zoomOut();\n form.random.onclick = () => chart.zoomRandom();\n form.reset.onclick = () => chart.zoomReset();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"radius = 6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"step = radius * 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"quadtree = d3.quadtree()\n .addAll(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"data = Array.from({length: 1000}, (_, i) => {\n const radius = step * Math.sqrt(i += 0.5), a = theta * i;\n return [\n width / 2 + radius * Math.cos(a),\n height / 2 + radius * Math.sin(a)\n ];\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"theta = Math.PI * (3 - Math.sqrt(5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\", await FileAttachment(\"d3-zoom.min.js\").url())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body" 29:E{"digest":"NEXT_REDIRECT;replace;/@d3/zoom-snap-to-nearest-point-212;307;"}