Pan/Zoom/Draggable

[techniq]

• [x] Drag
  • https://observablehq.com/@d3/drag-zoom
• [x] Wheel zoom
• [ ] Pinch to zoom
  • https://github.com/techniq/layerchart/issues/82
• [x] Zoom via buttons
• [x] Geometric zoom
  • https://observablehq.com/@john-guerra/svg-geometric-zoom?collection=@john-guerra/d3-zoom
• [x] 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
• [x] Zoom to bounding box
  • https://observablehq.com/@d3/zoomable-circle-packing
  • https://observablehq.com/@d3/zoom-to-bounding-box
• [x] Zoom to fit (all contents). See Tree example
  • https://typeofnan.dev/how-to-perfectly-fit-an-svg-to-its-contents-using-javascript/
• [x] Handle dragging with shapes on top
• [x] Brush / preview
• [ ] Zoomable Bar Chart
  • https://observablehq.com/@d3/zoomable-bar-chart
• [x] 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