Restricted zoom behavior in d3

100%

Restricted zoom behavior in d3

✓ Published0🌍 Public

Last edited May 5, 2019

Created on May 5, 2019

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.

AI-generated description

This gist shows how to restrict d3's zoom behavior so that users can't pan outside of a rectangular bounding box. Use your scroll wheel to zoom in and out of the field of circles, and click and drag to move when zoomed in. Note how when you zoom back out (by scrolling up) the view snaps to the original extent at zoom 1.

forked from <a href='http://bl.ocks.org/shawnbot/'>shawnbot</a>'s block: <a href='http://bl.ocks.org/shawnbot/6518285'>d3 bounded zoom behavior</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Constrained Zoom

This example demonstrates how to constrain d3-zoom so a rectangular image stays within the viewport during pan and zoom operations, using the `d3.zoom` API and its event handler. The SVG shows a small image element whose bounds are checked against the viewport; the `zoomed` function modifies the transform to prevent the image from moving off-screen. The code calculates the image’s coordinates and uses `scaleExtent` to limit zooming to the viewport size. This implementation relies on the d3.v4 library, rendering via SVG, and handles mouse interactions through the zoom’s event system.

Mmbostock

85% match

Loading thumbnail…

zoom/pan d3v4 - Full

This example demonstrates how to implement zoom and pan interactions on an SVG canvas. The visualization displays a single green circle centered in the viewport, with the zoom behavior applied directly to the SVG group element. The code uses the D3 v4 zoom API via `d3.zoom().on("zoom", zoomfn)` to handle mouse and touch events, and the zoom function applies the event transform to the group. A circle is rendered at the center using `svg.append("circle")`, and the zoom handler updates the group’s `transform` attribute while also calling `svg.scale(4)`, which scales the entire group by a fixed factor. The SVG fills the browser window.

IIgathi

83% match

Loading thumbnail…

Pan & Zoom IV

Two thousand circles laid out in a phyllotaxis spiral show the d3.zoom behavior applied by directly manipulating each circle’s SVG transform attribute. On every zoom event, the code calls *transform*.applyX and *transform*.applyY to remap the original data coordinates, keeping all circle radii constant at 2.5 pixels while allowing pan and zoom between half and four times the initial scale. This approach, written in d3.v4 with SVG, demonstrates an alternative to scaling a single parent group, trading performance for customization.

Mmbostock

82% 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

81% 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

81% match

Loading thumbnail…

Pan & Zoom III

This example shows a dense phyllotaxis pattern of 2,000 circles that users can pan and zoom with the mouse. The code uses the d3-zoom plugin in D3 v4 to handle input, applying the zoom transform directly to a group element containing the circles. An invisible overlay rect ensures the zoom behavior receives events, while the SVG’s coordinate system is adjusted with a translate transform. The rendering is done via SVG circles, with a resize handler updating the layout.

HHerst

81% 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

80% match

Loading thumbnail…

Zoom + Pan

This example demonstrates zooming and panning across a field of 2,000 semi-transparent red squares, whose positions are randomly generated from normal distributions centered in the viewport. The visualization shows how HTML elements can be transformed interactively using D3’s zoom behavior, with the underlying coordinate scales updating in real time. It uses D3 v3’s `d3.behavior.zoom` and linear scales (`d3.scale.linear`) to map data coordinates to screen positions, applying CSS `transform` styles to `<div>` elements. Unlike typical SVG-based examples, this implementation renders the squares as HTML `div` elements, highlighting a lightweight alternative for pan-and-zoom interactions without canvas or SVG overhead.

DDinoJay

80% match