d3-brush

Table of Contents

Prevent brushes from resizing howto

Use CSS:

.brush-group .handle {
  pointer-events: none;
}

brush.extent([extent]) reference

let brush = d3.brushX().extent([[0, 0], [width, height]]);

brush.handleSize([size]) reference

Clear brush selection howto

sel.call(this.bottomBrush.move, null);

Draw brush handles howto

Handles for d3.brushX()
Handles for d3.brushY()

The handles will look like:

Use brush selection to update vis howto

brush
  // brush ~= mousemove
  // end   ~= mouseup
  .on('brush end', () => {
    // contains pixels
    const sel = d3.event.selection || scale.range();
    const step = scale.step();
    // pixels -> indexes
    const begin = Math.round(sel[0] / step);
    const end = Math.round(sel[1] / step);
    // do something with selections
    // and re-render vis
  });