@types/d3-drag

What is @types/d3-drag?

The @types/d3-drag package provides TypeScript type definitions for the d3-drag module, which is part of the D3 (Data-Driven Documents) library. This package allows developers to use TypeScript to get compile-time type checking and IntelliSense for the d3-drag module, which is used for implementing drag-and-drop functionality on SVG, HTML, or Canvas elements.

What are @types/d3-drag's main functionalities?

Drag Behavior Creation

This feature allows you to create drag behaviors and define event listeners for the start, drag, and end events of a drag operation.

import * as d3 from 'd3';

const drag = d3.drag()
  .on('start', dragstarted)
  .on('drag', dragged)
  .on('end', dragended);

function dragstarted(event, d) {
  // Logic for when drag starts
}

function dragged(event, d) {
  // Logic for dragging
}

function dragended(event, d) {
  // Logic for when drag ends
}

Applying Drag Behavior to Elements

This feature demonstrates how to apply the drag behavior to a specific SVG, HTML, or Canvas element, enabling it to be draggable.

import * as d3 from 'd3';

const circle = d3.select('circle');
const drag = d3.drag();

circle.call(drag);

Accessing Drag Event Information

This feature shows how to access the current position of the element being dragged by using the drag event object.

import * as d3 from 'd3';

const drag = d3.drag()
  .on('drag', function(event) {
    console.log(event.x, event.y);
  });

Other packages similar to @types/d3-drag

react-dnd

React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled. It provides more React-centric, declarative approach compared to @types/d3-drag which is imperative and designed for use with D3.

interactjs

Interact.js is a JavaScript library for draggable, resizable, and multi-touch gestures. It's more general-purpose than @types/d3-drag and can be used without D3, offering a broader range of interactions beyond just dragging.

draggable

Draggable is a modular drag & drop library, allowing you to start with just the functionality you need. It's similar to @types/d3-drag but offers more modularity and plugins for additional features like swappable, sortable, and droppable elements.

README

Installation

npm install --save @types/d3-drag

Summary

This package contains type definitions for d3-drag (https://github.com/d3/d3-drag/).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-drag/v1.

Additional Details

• Last updated: Wed, 18 Oct 2023 00:05:18 GMT
• Dependencies: @types/d3-selection

Credits

These definitions were written by Tom Wanzek, Alex Ford, Boris Yankov, and Nathan Bierema.