Pan/Zoom/Draggable

[techniq]

• Drag
  • https://observablehq.com/@d3/drag-zoom
• Wheel zoom
• Pinch to zoom
  • [TransformContext] Add pinch/zoom gesture #82
• Zoom via buttons
• Geometric zoom
  • https://observablehq.com/@john-guerra/svg-geometric-zoom?collection=@john-guerra/d3-zoom
• Semantic zoom
  • https://observablehq.com/@john-guerra/svg-semantic-zoom?collection=@john-guerra/d3-zoom
• Axis / scale pan/zoom
  • https://observablehq.com/@d3/pan-zoom-axes
• Zoom to bounding box
  • https://observablehq.com/@d3/zoomable-circle-packing
  • https://observablehq.com/@d3/zoom-to-bounding-box
• Zoom to fit (all contents). See Tree example
  • https://typeofnan.dev/how-to-perfectly-fit-an-svg-to-its-contents-using-javascript/
• Handle dragging with shapes on top
• Brush / preview
• Zoomable Bar Chart
  • https://observablehq.com/@d3/zoomable-bar-chart
• Zooming and Panning Line Chart
  • https://lvcharts.com/docs/Blazor/2.0.0-beta.330/samples.lines.zoom
• Axis pagination
  • https://lvcharts.com/docs/Blazor/2.0.0-beta.330/samples.axes.paging
• https://observablehq.com/@d3/x-y-zoom?collection=@d3/d3-zoom

References

• https://github.com/d3/d3-zoom/
  • https://github.com/idris-maps/svelte-parts/blob/master/packages/zoom/svg/ZoomSvg.svelte
• https://svelte-ux.vercel.app/docs/actions/mouse
• https://codesandbox.io/s/32j6874rx5
• https://codesandbox.io/s/2x5y4y7kr0
• https://github.com/hshoff/vx/blob/master/packages/vx-zoom/src/Zoom.tsx
• https://github.com/anvaka/panzoom
• https://github.com/ariutta/svg-pan-zoom
• https://github.com/anvaka/panzoom
• https://svelte.dev/repl/75d0130acc704eceb7aa78d3e473441c?version=3.24.0
• https://observablehq.com/@oscar6echo/plot-attempts-on-zoom
• https://observablehq.com/@shaunlebron/minimal-d3-zoom-replacement