Dragging a rectangle

100%

Dragging a rectangle

✓ Published0🌍 Public

Last edited May 11, 2013

Created on May 11, 2013

Two draggable rectangles—one blue and 100 pixels square, the other smaller—respond to mouse interaction in a D3.js scene. Each rectangle tracks its own `x` and `y` position in a separate data array, updated on the `drag` event via `d3.behavior.drag()`. As the mouse moves, `d3.event.x` and `d3.event.y` assign new coordinates, and a redraw function updates the SVG attributes with the new values. The example demonstrates custom drag behavior with explicit origin binding and event handling.

AI-generated description

Similar vizzes

Loading thumbnail…

Dragging a rectangle,simple

Two blue squares are positioned in an SVG canvas, each bound to a data object with x and y coordinates. Dragging either square updates that object’s position in real time, and the rectangle is redrawn to follow the pointer. The code uses D3’s `d3.behavior.drag` with a drag event handler that reads `d3.event.x` and `d3.event.y`, then calls a `redraw1` function to update the square’s `x` and `y` attributes. The data starts as a simple array of two coordinate pairs, demonstrating a minimal drag-and-drop interaction without physics or constraints.

RRobinL

91% match

Loading thumbnail…

Drag circles

Five colored circles are positioned in a row on an 800×480 SVG canvas, each with a radius of 60 pixels. The example demonstrates a basic drag-and-drop interaction using D3.js v4, where users can move any circle freely by clicking and dragging it. The circles change cursor to a move icon on hover and gain a black outline while being dragged. The code uses `d3.drag()` with `dragstarted`, `dragged`, and `dragended` handlers, along with `d3.scaleOrdinal` and `d3.schemeCategory20` for coloring, and `d3.select(this).raise()` to bring the active circle to the front.

EEfratVil

75% match

Loading thumbnail…

d3.drag with grouped elements in v4

This example demonstrates how to use d3.drag in D3 v4 to drag grouped SVG elements together. Ten rectangles with accompanying text labels are generated randomly and placed on a 960×500 SVG canvas. The drag behavior is attached to each `<g>` group, and during the drag event both the rectangle and text are updated simultaneously using `d3.event.x` and `d3.event.y`. The code uses D3 v4’s selection, scaleOrdinal with `schemeCategory20`, and the d3-drag module.

Dd3noob

75% match

Loading thumbnail…

Drag Group Test v4

Randomly positioned rectangles with "Close" labels demonstrate how D3 v4's drag behavior applies to SVG group elements. Each group contains one rectangle and its text label, which move together during dragging. The example uses `d3.drag()` with `start`, `drag`, and `end` event handlers to update both child elements' `x` and `y` attributes. Data is generated with `d3.range()` and `Math.random()`, while `d3.scaleOrdinal` with `schemeCategory20` assigns colors. The code highlights the challenge of selecting parent `g` elements for unified drag interactions.

Dd3noob

75% match

Loading thumbnail…

dots

This example displays ten colored rectangles that can be dragged around an SVG canvas. The shapes are randomly positioned and sized using D3’s `d3.range` and `Math.random()`, with each rectangle filled via the `d3.schemePastel1` color scheme. The interactive drag behavior is implemented with `d3.drag()`, which updates the x and y attributes in the `dragged` event and raises the selected element to the front on drag start.

KKhatera Alizada

74% match

Loading thumbnail…

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title

This example demonstrates an interactive rectangle that can be resized and repositioned within a fixed map area using mouse or touch gestures. Dragging the corner handles adjusts the rectangle’s width and height while enforcing minimum size constraints, and dragging the rectangle’s interior moves it without exceeding the map boundaries. The visualization uses the D3.js library’s zoom and drag behaviors, with SVG elements for rendering and a custom zoom constraint function to keep the rectangle within the coordinate space. Numeric inputs for x, y, width, and height update live as the rectangle changes, reflecting the current state of the data.

HHerst

74% match

Loading thumbnail…

Drag Multiples

Sixteen identical SVG panels each display a gray circle that a viewer can drag within the panel’s boundaries. The circles are initially centered and constrained by the panel’s dimensions and the circle’s radius. The d3.behavior.drag() API handles the drag interaction, updating each circle’s cx and cy attributes based on the mouse event’s x and y positions. The code uses d3.select and d3.range to create the panels and data objects, with d3.event providing the current pointer coordinates.

GGerHobbelt

72% match

Loading thumbnail…

Click vs. (a great deal of) Drag(ging)

Twenty colored circles are rendered in an SVG, where each circle can be either clicked or dragged. A click triggers a two-step radius animation (expanding to 64, then shrinking back to 32), while dragging moves the circle and, once the drag exceeds a small threshold, brings the circle to the front using `raise()` and adds an active class. The example uses D3 v4’s `d3.drag()` with `.clickDistance(4)` to distinguish clicks from drags, alongside manual checks on `sourceEvent` coordinates to handle edge cases where the drag ends near the start point. Data is generated randomly as an array of 20 `{x, y}` objects, with colors assigned via `d3.scaleOrdinal` and `d3.schemeCategory20`.

HHerst

71% match