Skip to main content
SimilarExport ZIP
100%

d3.zoom.translateExtends

✓ Published0🌍 Public
SServuc
Last edited Aug 17, 2016
Created on Aug 16, 2016

This example demonstrates the zoom and pan capabilities of d3.zoom, using an SVG floor plan of the Grand Palace in Bangkok. The view is constrained within the map boundaries through the translateExtents method, preventing users from panning beyond the image edges. The code imports an Inkscape-generated SVG and applies d3.zoom with d3.event transforms to control the viewport. Zooming is limited to a specified scale range, and the SVG’s view group is updated accordingly to reflect the current transformation.

AI-generated description

Built with blockbuilder.org

gpl-3.0 Licensed

Similar vizzes

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

Basic Map Zooming

This example demonstrates how d3-zoom can be used to add pan and zoom interactions to a map. The map shows the states of India, rendered as SVG paths using an azimuthal equal-area projection and TopoJSON data. Each state is filled with a distinct color from a categorical palette, and hovering highlights the state by raising it above its neighbors and applying a thicker stroke. The zoom behavior, constrained to a scale range of 1–8× and bounded by the viewport, is applied directly to the SVG element, with a transform on the group containing all map paths. The window resize handler recalculates the projection’s fit and updates the translate extent, demonstrating how d3-zoom integrates with dynamic map projections.

663anp3ca
74% match
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
74% match
Loading thumbnail…

D3 Translate Example

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.

KK3zter
73% match
Loading thumbnail…

Fork of D3 Zoom

This example demonstrates interactive zooming and panning on an SVG canvas. A group of circles connected by lines, generated from trigonometric functions in `utils.js`, responds to mouse wheel and drag gestures through the `d3.zoom` API. The zoom behavior applies a scale transform to the container group, respecting a scale extent between 0.5x and 4x. The SVG output is created with the `select` and `append` methods from the `d3` v7 library.

KKhanin Sisaengsuwanchai
73% 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
73% 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