2f:[] 2d:{"title":"Zoom and Pan with Mouse","cells":[{"id":0,"value":"# Zoom and Pan with Mouse\nClick, drag, and scroll wheel within the graphics","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":27,"value":"viz = d3.select(svgContainer) // the usual d3 select of the main SVG container","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"circles = viz.select(\"#circlesLayer\").selectAll(\"circle\") // randomly placed circles to have something to zoom\n .data(d3.range(10))\n .join(\"circle\")\n .attr(\"cx\", () => 50 + Math.random() * 400)\n .attr(\"cy\", () => 50 + Math.random() * 200)\n .attr(\"r\", 20)\n .style(\"fill\", d => d3.schemeCategory10[d])\n .style(\"stroke\", \"#777\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"## the zoom function and attachment","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"viz.call(d3.zoom() // the viz svg does the call (could also be a sub group)\n .extent([[0,0],[500,300]])\n .scaleExtent([1,20])\n .on(\"zoom\", zoomed));","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"function zoomed({transform}) {viz.select(\"#circlesLayer\").attr(\"transform\", transform).style(\"stroke-width\", 1/transform.k);}\n// the circlesLayer gets the zoomed transform","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"## Notes\n- for best effect (and often just to work) the objects to be zoomed should be in their own layer (``) which is inside of the SVG drawing canvas. This can be a layer `` that contains many other layers (other sub `` groups) so that one zoom can handle all of them. (see [Planets in Motion](https://observablehq.com/@emfielduva/planets-in-motion?collection=@emfielduva/demos) for an example.)\n- the `zoomed` function needs to select and act upon that `` not on the svg element itself. The svg element cannot take a `transform` attribute (or more technically it does nothing useful with it), but the `` does.\n- extent and scaleExtent can be set as desired.\n- notice the .style stroke-width in the zoomed function, which is making the stroke smaller proportional to the level of closer zoom, so the stroke edge thickness doesn't get larger when you zoom. Remove that if you want the stroke edge to get thicker (not change) when you zoom in.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W2f","stdlib":"1","titling":"auto"}