Skip to main content
SimilarExport ZIP
100%

Zoom offset bug when resizing window

✓ Published0🌍 Public
NNJRBailey
Last edited Mar 29, 2018
Created on Mar 29, 2018

This block demonstrates a zoom-offset bug in a D3 v4 timeline chart with a time scale x-axis and a band scale y-axis. The SVG chart fills the window width, using `d3.scaleTime` and `d3.scaleBand` with `d3.zoom` for panning and zooming. On window resize, the x-axis range recalculates, causing the zoom transform to drift from the mouse cursor. The static data consists of two hardcoded date ranges rendered as rectangle bars.

AI-generated description

(To observe bug, make sure to open the block in its own window).

A pretty barebones, mostly unstyled block, used to demonstrate the zoom bug that occurs upon resize (as described here).

This chart is a timeline-style chart, with a time (continuous) scale for the x-axis and a band scale for the y-axis. The chart always fills the width of the window. The bug behaviour is described below:

Bug description

What is happening

We have a chart with a d3.scaleTime as the x-axis, and a d3.scaleBand as the y-axis. We only zoom and pan on the x-axis. When we zoom or pan the chart, there is a 1:1 movement with the mouse cursor. When the window is resized horizontally, the x-axis range is recalculated, so that the chart will shrink or expand to fill the space - however, this results in the zoom and panning having an offset (the mouse moves a longer or shorter distance than the chart, and the zoom will focus in on a point to the left or right of the mouse cursor).

What should be happening

The zoom should stay 1:1 with the mouse (move the same distance, zoom in on the mouse position) after window resize.

How to reproduce

  1. Load block in its own window.
  2. Resize the window - the bug will be more obvious with a larger resize.
  3. Try to zoom on a point - you will see that the chart zooms towards a different point than the mouse is currently at. Also, if you pan the chart, you will see that the chart is moving faster or slower than the mouse cursor (try comparing with one of the axis ticks for reference).

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Zoom + Pan

This example demonstrates how to pan and zoom a chart using D3.js v3. It renders an SVG with axes and a filled background rectangle, using linear scales for the x- and y- dimensions. The `d3.behavior.zoom` API links the zoom behavior to the scales, allowing mouse wheel and drag interactions to rescale the axes. When zooming occurs, the axes are redrawn to reflect the updated scale ranges. The code sets a zoom scale extent between 1 and 32, and uses `d3.svg.axis` to produce the tick marks and grid lines.

Mmbostock
76% match
Loading thumbnail…

timeline chart with zoom

This example displays a timeline of 15 randomly generated vehicle intervals, with each row rendered as a colored horizontal bar spanning its start and end dates. The chart supports zooming and panning through a D3 v4 zoom behavior applied to an overlay rectangle, which rescales a time scale and updates all bars and the axis accordingly. Tooltips show raw date details on hover. The layout is built with SVG, nested data via `d3.nest`, and a bottom axis using `d3.axisBottom`, while the zoom transformation is applied using `transform.rescaleX`.

TTBD
74% match
Loading thumbnail…

Zoomable Timeline

This zoomable timeline visualizes time-series data across multiple scales, allowing users to explore yearly, weekly, and daily granularities. Built with D3 version 6, it uses axis utilities like `d3.axisTop` and `d3.utcTime` intervals to dynamically adjust tick density based on zoom level. The example provides a reset button and a slider to control the number of years displayed, with the SVG chart updating through a custom timeline function that manages grid lines and formatted labels.

CClaudioTM
73% match
Loading thumbnail…

Pan & Zoom Axes

This example demonstrates a zoomable scatterplot where panning and zooming are controlled by the d3-zoom library. The visualization shows a colorful gradient rectangle as the data view, with axes that rescale dynamically through `transform.rescaleX` and `transform.rescaleY`. Users can drag to pan and scroll to zoom, with a button to reset the view via `d3.zoomIdentity`. The SVG rendering uses d3-scaleLinear for axes and a text gradient inspired by Nadieh Bremer.

Mmbostock
72% match
Loading thumbnail…

Restricted zoom behavior in d3

This example demonstrates restricted zoom behavior in d3.v5, bounding pan and zoom within a rectangular viewport. A field of 300 randomly positioned and sized circles is rendered in an SVG, and users can scroll to zoom up to 50x and drag to pan; when zooming out to the original scale, the view snaps back to the full extent. The implementation uses `d3.zoom()` with a custom `on("zoom")` handler that clamps translation based on viewport dimensions and scale, then updates the `<g>` element’s `transform` attribute, applying the constrained translation and scale.

GGerardoFurtado
72% match
Loading thumbnail…

D3 Zoom

A D3 zoom interface demonstrates interactive panning and scaling within an SVG coordinate system. A single green circle, positioned through linear scales, responds to mouse wheel and drag gestures that trigger the `d3.zoom` behavior. The example simultaneously updates axis tick marks via `transform.rescaleX` and `rescaleY`, while displaying the current translation values and zoom multiplier in separate HTML divs. The visualization renders with SVG elements, using `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` to maintain spatial mapping during the zoom transform.

WWRCIECH
72% match
Loading thumbnail…

D3 V4 zoom with Axis explained

This example demonstrates an interactive zooming technique for scatterplot-style visualizations using D3.js version 4. A red SVG viewport contains a single circle and two axes, with a transparent rectangle serving as the zoom control surface. The implementation uses `d3.zoom()` to capture mouse interactions and applies the event's transform to rescale both the linear x and y axes via `rescaleX()` and `rescaleY()`. Axis updates are handled through `d3.axisBottom` and `d3.axisLeft`, while the data circle is repositioned using the same transform, creating a synchronized zoom effect without clipping.

FFrissAnalytics
72% match
Loading thumbnail…

Zoom + Pan

This example demonstrates zooming and panning across a 2D Cartesian coordinate system with visible axes. The view initially centers on the origin, and the user can pan by dragging and zoom by scrolling, with the axis tick marks and grid lines updating accordingly. A "Reset" button restores the original scale and translation. The implementation uses d3.behavior.zoom with linear scales for the x and y axes, and calls the axis render functions within the zoom event handler. The SVG rendering includes a light gray background rectangle and white axis strokes.

Mmbostock
71% match