@types/d3-brush

What is @types/d3-brush?

@types/d3-brush provides TypeScript type definitions for the d3-brush module, which is part of the D3.js library. The d3-brush module allows for the creation of interactive brushing and linking features in data visualizations, enabling users to select and highlight specific regions of a chart.

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

Creating a Brush

This code initializes a basic brush. A brush is an interactive selection tool that allows users to select a region within a chart.

const brush = d3.brush();

Setting Brush Extent

This code sets the extent of the brush, defining the area within which the brush can be used. The extent is defined by two points: the top-left and bottom-right corners.

brush.extent([[0, 0], [width, height]]);

Handling Brush Events

This code attaches event listeners to the brush for 'brush' and 'end' events. The 'brushed' function is called whenever the brush is moved or resized, allowing you to handle the selection.

brush.on('brush end', brushed);

function brushed(event) {
  const selection = event.selection;
  // Handle the brush selection
}

Applying Brush to an SVG Element

This code applies the brush to an SVG element. The brush is appended to a group element within the SVG, and the 'call' method is used to apply the brush behavior to the group.

d3.select('svg').append('g').attr('class', 'brush').call(brush);

Other packages similar to @types/d3-brush

d3-selection

The d3-selection module provides methods for selecting and manipulating DOM elements. While it does not offer brushing functionality, it is often used in conjunction with d3-brush to handle selections and apply styles or transformations to selected elements.

d3-zoom

The d3-zoom module provides pan and zoom behaviors for D3 visualizations. It allows users to interactively zoom and pan within a chart, which can be used alongside d3-brush to create more interactive and dynamic visualizations.

d3-drag

The d3-drag module provides drag-and-drop behaviors for D3 visualizations. It allows users to drag elements within a chart, which can complement the brushing functionality by enabling more complex interactions.

README

Installation

npm install --save @types/d3-brush

Summary

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

Details

Files were exported from https://www.github.com/DefinitelyTyped/DefinitelyTyped/tree/types-2.0/d3-brush

Additional Details

• Last updated: Mon, 05 Dec 2016 21:27:34 GMT
• File structure: ProperModule
• Library Dependencies: none
• Module Dependencies: d3-selection
• Global values: none

Credits

These definitions were written by Tom Wanzek https://github.com/tomwanzek, Alex Ford https://github.com/gustavderdrache, Boris Yankov https://github.com/borisyankov.