Dragging a rectangle,simple

100%

Dragging a rectangle,simple

✓ Published0🌍 Public

Last edited May 11, 2013

Created on May 11, 2013

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Dragging a rectangle

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.

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

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

72% match

Loading thumbnail…

Draggable Squares

Six colored squares, positioned at fixed coordinates and linked by a gray polyline, respond to mouse interactions in a unidirectional data flow. Clicking a square selects it, drawing a thick black stroke around it via `highlightSelectedDatum`. Dragging a square updates its x and y coordinates through d3’s `drag` handler, triggering a re-render that moves the square and the connecting line. The example uses d3 v7 with ES modules, rendering SVG elements through `join` and a centralized state managed by `setState`.

CCurran Kelleher

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

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

71% match

Loading thumbnail…

Circle Dragging I

This example shows a set of colored circles scattered across an SVG canvas, which users can drag with the mouse. Each circle’s position is stored as x and y properties in its data object, and those values update live during the drag. The code uses d3.select and d3.drag from the d3-drag module to handle the interaction, attaching event handlers for start, drag, and end. At drag start, the circle is raised to the foreground with `.raise()` and gets a black stroke via the `.active` class; the stroke is removed on release. The circles are rendered as SVG `<circle>` elements, colored with a categorical scheme from `d3.scaleOrdinal` and `d3.schemeCategory20`, with random initial positions computed from the SVG’s dimensions.

Mmbostock

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

71% match