30:T45c,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append(defs); const view = svg.append("rect") .attr("class", "view") .attr("x", 0.5) .attr("y", 0.5) .attr("width", width - 1) .attr("height", height - 1); const gX = svg.append("g").attr("class", "axis axis--x").call(xAxis); const gY = svg.append("g").attr("class", "axis axis--y").call(yAxis); const zoom = d3.zoom() .scaleExtent([1, 40]) .translateExtent([[-100, -100], [width + 90, height + 100]]) .filter(filter) .on("zoom", zoomed); return Object.assign(svg.call(zoom).node(), {reset}); function zoomed({ transform }) { view.attr("transform", transform); gX.call(xAxis.scale(transform.rescaleX(x))); gY.call(yAxis.scale(transform.rescaleY(y))); } function reset() { svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); } // prevent scrolling then apply the default filter function filter(event) { event.preventDefault(); return (!event.ctrlKey || event.type === 'wheel') && !event.button; } }31:[] 2e:{"title":"Pan & Zoom Axes","cells":[{"id":0,"value":"# Pan & Zoom Axes","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"This example demonstrates using [d3-zoom](https://d3js.org/d3-zoom) to drive changes to scales’ domains via [*transform*.rescaleX](https://d3js.org/d3-zoom#transform_rescaleX) and [*transform*.rescaleY](https://d3js.org/d3-zoom#transform_rescaleY). The transformed scales are used to draw [axes](https://d3js.org/d3-axis). The transform is also applied [via SVG transform](https://observablehq.com/@d3/zoom) to the colorful rainbow rect. (The colors are from [Nadieh Bremer](http://www.visualcinnamon.com/)’s lovely [SVG gradient tutorial](http://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient.html).)","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"Inputs.button(\"Reset\", {reduce: chart.reset})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"defs = () => svg`\n \n\n \n \n \n \n \n \n \n \n \n \n \n `","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"x = d3.scaleLinear()\n .domain([-1, width + 1])\n .range([-1, width + 1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"y = d3.scaleLinear()\n .domain([-1, height + 1])\n .range([-1, height + 1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"xAxis = d3.axisBottom(x)\n .ticks(((width + 2) / (height + 2)) * 10)\n .tickSize(height)\n .tickPadding(8 - height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"yAxis = d3.axisRight(y)\n .ticks(10)\n .tickSize(width)\n .tickPadding(8 - width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}