25:["$","title",null,{"children":"Zoom snap to nearest point | Fil | Observable"}] 49:T95f,chart = { let focussed; const zoom = d3 .zoom() .scaleExtent([1, 40]) .on("zoom", zoomed) .filter(function() { // this is all very hacky const _event = d3.event; const point = d3.zoomTransform(this).apply(focussed); d3.event = { clientX: point[0] + this.getBoundingClientRect().x, clientY: point[1] + this.getBoundingClientRect().y, preventDefault: () => _event.preventDefault(), stopImmediatePropagation: () => _event.stopImmediatePropagation(), deltaY: _event.deltaY, deltaMode: _event.deltaMode }; return true; }); 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.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 mousemove() { const p = d3.zoomTransform(this).invert(d3.mouse(this)); focussed = quadtree.find(p[0], p[1]); // used to be zoom.center(q) g.selectAll("circle").attr("r", p => (p == focussed ? radius + 3 : radius)); } function clicked([x, y]) { d3.event.stopPropagation(); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(40) .translate(-x, -y), d3.mouse(svg.node()) ); } function zoomed() { g.attr("transform", d3.event.transform); } return Object.assign(svg.node(), { zoomIn: () => svg.transition().call(zoom.scaleBy, 2), zoomOut: () => svg.transition().call(zoom.scaleBy, 0.5), zoomRandom: random, zoomReset: reset }); }4a:[] 29:{"id":"002dad570d56f3e2","slug":null,"title":"Zoom snap to nearest point","thumbnail":"1897b8d82267bbdb0a2b5a0d6b9f3993ed344491b7b82fbe63b8be02dbd58246","access_level":"unlisted","create_time":"$D2020-07-12T09:07:14.727Z","update_time":"$D2020-07-12T09:19:41.859Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"da2a32154638c457","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":"starter_2024","bio":"Vocateur.","followed_by_you":false,"follows_you":false},"version":263,"publish_version":263,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"bio":"Vocateur.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Zoom snap to nearest point","cells":[{"id":0,"value":"md`# Zoom snap to nearest point\n\nhttps://talk.observablehq.com/t/d3-zoom-snap-to-nearest-point-instead-of-mouse-pos/3588/2\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"radius = 6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"step = radius * 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"quadtree = d3.quadtree()\n .addAll(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"theta = Math.PI * (3 - Math.sqrt(5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null