Learn D3.js

One-dimensional brush

Brushing can be used to zoom into the details of charts that have a lot of concentrated data. The following example adds a horizontal-axis brush to a line chart that displays global temperatures from 1880 to 2016. Only relevant code fragments are shown. You can see the full code at Brush/1-brush-x.html.

A one-dimensional x-axis brush is created with d3.brushX() and the default configuration, as shown in the following code. Only one listener is configured. It will handle the end event, calling the detail() function when the brush is done:

const brush = d3.brushX().on("end", detail);

The brush is called from the view object (<g>) that contains all the data points, as shown in the following code:

view.call(brush); // Call ...