Drag + Zoom

100%

✓ Published0🌍 Public

Last edited Aug 8, 2019

Created on Jul 31, 2013

In this example, dots loaded from a TSV file are positioned in an SVG scatterplot with a light grid. Users can drag individual circles to move them, while clicking and dragging on the background pans the view, and the mousewheel zooms the entire scene. The code combines `d3.behavior.drag` and `d3.behavior.zoom`, using `stopPropagation` in the dragstarted handler to give dragging precedence over panning. Both behaviors update the container's transform attribute via the zoom event's translate and scale values, with dragged circles updating their cx and cy attributes.

AI-generated description

An example of how to combine d3.behavior.drag and d3.behavior.zoom, using stopPropagation to allow the drag behavior to take precedence over panning. Use the mouse to pan by clicking on the background, or drag by clicking on individual dots; you may also use the mousewheel to zoom.

Note: combining these two behaviors means that gesture interpretation is ambiguous and highly sensitive to position. A click on a circle is interpreted as dragging that circle, whereas a click one pixel away could be interpreted as panning the background. A more robust method of combining these behaviors is to employ modality. For example, if the user holds down the SPACE key, clicking and dragging is interpreted as panning, rather than dragging, regardless of the click location. This approach is commonly employed in commercial software such as Adobe Photoshop.

This example was created in response to a Stack Overflow question.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Drag & Zoom II

This example demonstrates a zoomable SVG canvas containing two thousand circles arranged in a phyllotaxis pattern, where users can click and drag on the background to pan the view or drag individual circles to reposition them. The visualization combines d3-drag and d3-zoom, using the `d3.zoomIdentity` transform to update the group’s `transform` attribute during zooming, while the drag handler updates each circle’s `cx` and `cy` attributes directly. Rendering relies on SVG’s built-in hit-testing and coordinate transformation, avoiding the need for manual redraws or complex event logic.

Mmbostock

90% match

Loading thumbnail…

Drag + Zoom + Slider

This example shows a scatterplot of dots from a TSV file, where users can both drag individual circles and zoom the entire view pane. An HTML5 range slider below the chart controls the zoom level, updating the SVG group’s transform scale in real time. Implemented with D3.js v3, it combines `d3.behavior.zoom` for pan/zoom interactions, `d3.behavior.drag` for moving circles, and a slider event handler that calls `zoom.scale(...).event(svg)` to drive the zoom behavior programmatically.

RRicCheng

89% match

Loading thumbnail…

Drag & Zoom

This example combines `d3.drag` and `d3.zoom` on a Canvas to allow both panning the view and moving individual points. Clicking and dragging on the background pans the zoomable world, while dragging on a circle moves that circle in world coordinates. The code explicitly converts between pointer coordinates and world coordinates using the zoom transform’s `invertX`/`invertY` and `applyX`/`applyY` methods. It renders 2,000 points generated by a phyllotaxis pattern, drawn as a single Canvas path with `arc` calls.

Mmbostock

85% match

Loading thumbnail…

Example of zoom and drag in d3 v4.

This example demonstrates how to combine zoom and drag interactions on SVG circles in d3 v4, solving the issue where dragged elements misalign under a zoom transform. It shows 50 randomly positioned circles that remain draggable and correctly track the mouse even when the view is zoomed. The code uses `d3.drag()` and `d3.zoom()` handlers, with a custom drag function that reads the current scale from the circle’s transform attribute to adjust the mouse coordinates. Rendering is done via SVG elements, and the data consists of random x/y positions generated with `d3.range`.

AAlainRo

83% match

Loading thumbnail…

Fork of Zoomable and Draggable Circles with D3-Drag and D3-Zoom

This example demonstrates draggable, zoomable circles rendered as an SVG visualization. Users can drag individual circles to reposition them and zoom or pan the entire scene using mouse or touch interactions. The visualization uses D3’s `drag` and `zoom` behaviors, with a state management pattern that updates circle coordinates and the group transform on interaction. Initial circle positions, sizes, and colors are hardcoded as static data, while the `d3.select`, `join`, and `attr` methods handle dynamic rendering and updates.

AAl Piepho

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

83% match

Loading thumbnail…

Zoomable and Draggable Circles with D3-Drag and D3-Zoom

This example demonstrates draggable and zoomable circles, where users can reposition individual circles by dragging and pan or scale the entire scene via zoom interactions. It visualizes six colored circles, each with a fixed position, radius, and fill color. The implementation uses D3’s `drag` and `zoom` behaviors, with the state managed through a `setState` callback that updates circle coordinates during drag and applies a transform to a parent group element during zoom. The rendering uses D3’s `select`, `selectAll`, `join`, and `attr` methods, with a light green background.

AAl Piepho

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