Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Translate Example

Public visualization

D3 Translate Example

1 star0🌍 Public
KK3zter
Last edited Dec 24, 2021
Created on Dec 24, 2021
Forked from D3 Starter

This example demonstrates a panning interaction for a 28×28 grid of colored rectangles rendered as SVG, where the default d3.zoom wheel behavior is replaced with a custom wheel handler that calls `zoomer.translateBy` on a transition. The visualization shows how adding a transition to `translateBy` causes the grid to gradually zoom out instead of scrolling vertically as intended, contrasting with the default behavior without a transition. The code uses `d3.select`, `d3.range`, `d3.zoom`, `d3.interpolate`, and SVG rectangles with random fill colors, with the zoom transform applied directly to the rectangles.

AI-generated description

Example of issue with zoom.translateBy()

Comments

Sign in to join the discussion.

MIT Licensed