2f:T64d,chart = { const SCALE_IN = 20; const zoom = d3.zoom().scaleExtent([1, 40]).on("zoom", zoomed); 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); 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(SCALE_IN) .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(SCALE_IN) .translate(-x, -y), d3.pointer(event) ); } function zoomed({ transform }) { g.attr("transform", 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 }); }30:[] 2d:{"title":"Programmatic Zoom","cells":[{"id":0,"value":"# Programmatic Zoom\n\nClick a button or circle to zoom in or out via [*zoom*.scaleBy](https://d3js.org/d3-zoom#zoom_scaleBy).","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":10,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 800 // Observable provides a responsive *width*","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"radius = 6","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"step = radius * 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = Array.from({length: 2000}, (_, 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"},{"id":58,"value":"theta = Math.PI * (3 - Math.sqrt(5))","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}