Capturing Mousemove

100%

Capturing Mousemove

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 3, 2012

Three div elements display their current mouse coordinates as a visual feedback for dragging. Clicking and holding any div initiates a drag state, where the text inside updates to show the mouse position relative to that specific div’s top-left corner; releasing the mouse clears the active state. The example uses `d3.select` to attach `mousedown` handlers to the divs, and dynamically registers `mousemove` and `mouseup` listeners on the `window` object only while a drag is in progress. It uses `d3.event.preventDefault()` to stop text selection, `d3.mouse` to compute relative coordinates, and `.classed` for styling changes.

AI-generated description

This example demonstrates a simple technique for capturing mousemove and mouseup events that are initiated by a mousedown on an element of interest. The mousemove and mouseup listeners are registered on the window when the first mousedown event is received; thus, these listeners are automatically scoped to the initiating element (div), while still being able to receive mouse events from anywhere in the current window. When the mouseup event is received, the window listeners are deleted.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Multitouch Drag II

Twenty colored divs drift across the browser window, each rendered as a circle via CSS border-radius and positioned using a CSS transform translate. Dragging a circle with a mouse or touch lifts it visually: it expands, gains a soft box-shadow, and uses an elastic ease during the size transition. The implementation uses D3 v3’s `d3.behavior.drag` for pointer handling, `d3.scale.category10` for colors, and `d3.interpolate` to animate box-shadow between drag states. Data is randomly generated from 20 coordinate pairs.

Mmbostock

74% match

Loading thumbnail…

Mouseenter

A nested set of semi-transparent rectangles demonstrates the practical difference between D3’s mouseenter/mouseleave events and the standard mouseover/mouseout events. Each time the mouse enters a group, a text label with the event name (e.g., "mouseenter" or "mouseover") fades in at the cursor position, while moving between nested rectangles triggers only the mouseover/mouseout pair. The code attaches these four handlers to a recursively nested SVG `<g>` element, uses `d3.mouse` for cursor coordinates, and animates the labels’ opacity to zero via D3’s `transition`. A polyfill is mentioned for browsers without native mouseenter support.

Mmbostock

72% match

Loading thumbnail…

Multitouch Drag

Twenty colored circles move freely over a full-window SVG canvas. Each circle is draggable with a multitouch pointer, and its position updates live to follow the finger. The code uses `d3.behavior.drag` with `dragstart`, `drag`, and `dragend` handlers to manage interaction, while `d3.select` and `.transition().ease("elastic")` animate the radius from 32 to 48 pixels on grab and back on release. Random starting coordinates come from `d3.range(20).map()`.

Mmbostock

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

71% match

Loading thumbnail…

d3.js: mouse drag a la iphone: decceleration

This example demonstrates an interactive image viewer that supports panning, zooming, centering, and resetting using mouse drags, scrollwheel, and keyboard shortcuts. It implements a swipe gesture with deceleration, where releasing the mouse during a drag continues the image’s momentum. The interface also displays a cycling tip-of-the-day overlay after five seconds of inactivity, which fades in and out using D3 transitions. The code relies on `d3.behavior.drag`, `d3.timer`, and `d3.json` to load the configuration, while rendering a large external JPEG image inside a clipped container.

GGerHobbelt

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…

Click vs. Drag

Twenty colored circles start at random positions. Clicking a circle briefly inflates it to black and back, while dragging moves it to a new location. Using `d3.behavior.drag` with d3.v3, the example distinguishes the two gestures by checking `d3.event.defaultPrevented` in the click handler. The SVG rendering animates transitions for the inflation effect and reorders dragged elements to the front.

Mmbostock

70% match

Loading thumbnail…

Moving Mouse

A single red circle follows the mouse cursor across a full-screen SVG canvas, updating its position in real time with each mousemove event. Clicking anywhere randomly changes the circle's fill color by generating new RGB values. The visualization uses D3 v7's `select`, `join`, and event handling to bind the circle to the pointer coordinates, with state managed through a custom `setState` function that triggers re-renders. The SVG dimensions are set to match `window.innerWidth` and `window.innerHeight`, and the cursor is hidden via CSS.

SSubhendu Karmakar

70% match