Skip to main content
100%

D3.js: Panning with mouse wheel

✓ Published0🌍 Public
Aahmohamed
Last edited Feb 20, 2015
Created on Feb 20, 2015

A D3.js v3 example remaps the mouse wheel to pan a scatterplot of 2,000 normally distributed points instead of zooming. The visualization renders circles as SVG elements inside a group that responds to wheel events. The code uses `d3.behavior.zoom` for the initial zoom setup, then overrides the `wheel.zoom` event with a custom `pan` function. This function reads `d3.event.wheelDeltaX` and `wheelDeltaY`, adds them to the current translation from `d3.transform`, and updates the group’s `transform` attribute, while stopping propagation to prevent default zoom behavior.

AI-generated description

This example demonstrate how to remap D3 events. MouseWheel event is used to pan the chart in x and y directions. This example was created as an answer to this SO question (Refer to it for detailed explanation).

Similar vizzes

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
80% match
Loading thumbnail…

Zoom + Pan

The example demonstrates zooming and panning over a dense scatterplot of 2,000 points, rendered as red squares that move in response to user interaction. It shows how a standard d3.behavior.zoom can be applied to HTML divs rather than SVG, using CSS transforms for positioning. The code generates random data with d3.random.normal, maps it through linear scales, and updates each square’s transform during the zoom event. The visualization uses d3.v3 with SVG-free HTML elements, highlighting the flexibility of D3’s zoom behavior for non-SVG layouts.

DDinoJay
79% match
Loading thumbnail…

Simple Zoom and Pan

This example demonstrates simple zoom and pan interactions on a scatterplot of 100 randomly positioned circles. The visualization uses D3 v4 to render SVG circles with a categorical color scale, while a transparent overlay rectangle captures pointer events and applies a zoom behavior with a scale extent from 0.5× to 4×. The zoomed function updates the transform attribute of a container group, enabling smooth panning and scaling of all circles. The code leverages d3.zoom and d3.event.transform to handle the interaction, with the data generated on the fly using d3.range and Math.random.

EEfratVil
79% match
Loading thumbnail…

Zoom + Pan

This example demonstrates zooming and panning on a two-dimensional Cartesian plane using D3’s `d3.behavior.zoom` with linear `x` and `y` scales. Dragging the mouse pans the view, while the mouse wheel zooms, with the scale extent limited to 1–32×. The code renders an SVG with a light gray background, a bottom x-axis with full-height tick lines, and a left y-axis with five ticks; during zoom events, the `zoomed` handler updates the x-axis only. It builds on D3 v3 and uses SVG elements for all graphics. No data is loaded; the chart shows an empty coordinate system.

ZZhengYingqian
79% match
Loading thumbnail…

Zoom + Pan

A D3.js line chart with grid-like axes supports interactive panning and zooming, controlled by dragging and mouse-wheel gestures. The view resets via a button, triggering a smooth animated transition back to the default domain using `d3.behavior.zoom`, `d3.scale.linear`, and `d3.transition().tween`. The SVG rendering showcases the axis updates, while the button click remaps the scales programmatically and rebinds them to the zoom behavior.

FFrissAnalytics
79% match
Loading thumbnail…

D3 Zoom

This example demonstrates interactive zooming and panning on a scatterplot of 100 randomly positioned points. Users can scroll to zoom in and out within a scale extent of 0.5x to 4x, or click and drag to pan across the full-window SVG canvas. The visualization uses d3.zoom to attach zoom behavior to the root SVG element and applies the transform directly to that element’s `transform` attribute during the zoom event. Data is generated randomly with the `makeData` utility, and circles are bound and updated using D3’s data join pattern.

KKhanin Sisaengsuwanchai
79% match
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
79% match
Loading thumbnail…

Zooming and Panning

Four multicolored circles arranged in a square pattern sit at the center of an SVG canvas. The visualization demonstrates zooming and panning through d3.behavior.zoom, which captures mouse wheel drags and touch gestures. Users can scale the view between 1× and 10× magnification and pan freely by dragging. The circles’ positions are defined in data arrays and rendered as SVG circle elements with a translate transform applied to the parent group during zoom events.

IIgathi
78% match