3e:null 3f:["$","title",null,{"children":"Pan and zoomable grid via SVG Pattern | Jordi Saludes | Observable"}] 45:T4b8,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/3); /* 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); } }); }46:[] 43:{"id":"629615ad10d37b25","slug":null,"title":"Pan and zoomable grid via SVG Pattern","thumbnail":"4bbfcf26d855631870189605ae3e7d188a24177ca38c777bf71a6d4c5ea101ec","access_level":"public","create_time":"$D2024-02-08T11:38:06.569Z","update_time":"$D2024-02-08T13:44:00.896Z","view_time":null,"first_public_time":"$D2024-02-08T11:38:06.569Z","has_unpublished_edits":null,"fork":{"id":"5da188dd41a7d123","slug":"pan-and-zoomable-grid-via-svg-pattern","title":"Pan and zoomable grid via SVG Pattern","owner":{"id":"740268410a9b156b","login":"leonardfischer","name":"Leonard Fischer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f4b4b938baf27882","login":"saludes","name":"Jordi Saludes","avatar_url":"https://avatars-next.observableusercontent.com/1d2477217e4b39f06cb2a19437f76e41d53331ab9b2d19b640c7d8be6b0cd950","tier":"starter_2024","bio":"","following":false},"version":85,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0510e92df0de01d0","login":"saludes","name":"Jordi Saludes","avatar_url":"https://avatars-next.observableusercontent.com/1d2477217e4b39f06cb2a19437f76e41d53331ab9b2d19b640c7d8be6b0cd950","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0510e92df0de01d0","login":"saludes","name":"Jordi Saludes","avatar_url":"https://avatars-next.observableusercontent.com/1d2477217e4b39f06cb2a19437f76e41d53331ab9b2d19b640c7d8be6b0cd950","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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`