40:null 41:["$","title",null,{"children":"Pan and zoomable grid via SVG Pattern | Leonard Fischer | Observable"}] 47:T4b0,chart = { const zoom = d3.zoom() .scaleExtent([.25, 4]) .on("zoom", zoomed); const svg = d3.select("svg") .attr("viewBox", [0, 0, width, height]); const patternGrid = svg.select('#grid'); const patternInnerGrid = svg.select('#inner-grid'); const canvas = svg.select('g'); svg.call(zoom).call(zoom.transform, d3.zoomIdentity); function zoomed({transform}) { const transform10 = parseInt(transform.k * 10); const transform100 = transform10 * 10; // Don't move the grid itself, simply change the pattern. patternGrid .attr('x', parseInt(transform.x % transform100)) .attr('y', parseInt(transform.y % transform100)) .attr('width', transform100) .attr('height', transform100); patternInnerGrid .attr('width', transform10) .attr('height', transform10); // Translate and scale the canvas. canvas.attr('transform', transform); } return Object.assign(svg.node(), { reset() { const identity = d3.zoomIdentity; identity.x = width / 2; identity.y = height / 2; svg.transition() .duration(750) .call(zoom.transform, identity); } }); }48:[] 45:{"id":"5da188dd41a7d123","slug":"pan-and-zoomable-grid-via-svg-pattern","title":"Pan and zoomable grid via SVG Pattern","thumbnail":"689c57b27c70d0976aec0bdb5840bb09c20b25c6d2cbfefd6edad02dbec96047","access_level":"public","create_time":"$D2020-09-07T16:11:47.478Z","update_time":"$D2020-09-07T16:42:39.483Z","view_time":null,"first_public_time":"$D2020-09-07T16:39:05.310Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"740268410a9b156b","login":"leonardfischer","name":"Leonard Fischer","avatar_url":"https://avatars-next.observableusercontent.com/07254e261f7dce7b91fdd299a7d48af96ecea940724175ae8d6bd2ef3726450d","tier":"starter_2024","bio":"","following":false},"version":60,"publish_version":60,"role":null,"authored":false,"authors":[{"type":"individual","id":"92630c60c9936c95","login":"leonardfischer","name":"Leonard Fischer","avatar_url":"https://avatars-next.observableusercontent.com/07254e261f7dce7b91fdd299a7d48af96ecea940724175ae8d6bd2ef3726450d","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"92630c60c9936c95","login":"leonardfischer","name":"Leonard Fischer","avatar_url":"https://avatars-next.observableusercontent.com/07254e261f7dce7b91fdd299a7d48af96ecea940724175ae8d6bd2ef3726450d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Pan and zoomable grid via SVG Pattern","cells":[{"id":0,"value":"md`# Pan and zoomable grid via SVG Pattern\n\nDisplay a grid that will pan and zoom, according to mouse or touch input. But this time we'll use a SVG pattern to improve performance.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof reset = html`