@types/d3-brush

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);