Table of Contents

• Prevent brushes from resizing
• brush.extent([extent])
• brush.handleSize([size])
• Clear brush selection
• Draw brush handles
• Use brush selection to update vis

Prevent brushes from resizing howto

Use CSS:

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

brush.extent([extent]) reference

• Sets the brushable extent to the specified array of points

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

brush.handleSize([size]) reference

• Handles are invisible by default
• Adjusts the size of area of resizing events

Clear brush selection howto

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

Draw brush handles howto

brushGroup.selectAll('.v-brush-handle')
  .data([{ type: 'w' }, { type: 'e' }])
  .enter()
  .append('path')
  .classed('v-brush-handle', true)
  .attr('cursor', 'ew-resize')
  .attr('d', (d) => {
    const e = +(d.type === 'e');
    const h = this.bottomHeight;
    const x = e ? 1 : -1;
    const y = (this.bottomHeight - h) / 2;
    return [
      `M ${0.5 * x} ${y}`,
      `A 6 6 0 0 ${e} ${6.5 * x} ${y + 6}`,
      `V ${y + h - 6}`,
      `A 6 6 0 0 ${e} ${0.5 * x} ${y + h}`,
      'Z',
      `M ${2.5 * x} ${y + 8}`,
      `V ${y + h - 8}`,
      `M ${4.5 * x} ${y + 8}`,
      `V ${y + h - 8}`,
    ].join(' ');
  });

brushGroup.selectAll('.v-brush-handle')
  .data([{ type: 'n' }, { type: 's' }])
  .enter()
  .append('path')
  .classed('v-brush-handle', true)
  .attr('cursor', 'ns-resize')
  .attr('d', (d) => {
    const s = +(d.type === 's');
    const w = this.sideWidth;
    const x = (this.sideWidth - w) / 2;
    const y = s ? 1 : -1;
    return [
      `M ${x} ${0.5 * y}`,
      `A 6 6 0 0 ${s} ${x + 6} ${6.5 * y}`,
      `H ${x + w - 6}`,
      `A 6 6 0 0 ${s} ${x + w} ${0.5 * y}`,
      'Z',
      `M ${x + 8} ${2.5 * y}`,
      `H ${x + w - 8}`,
      `M ${x + 8} ${4.5 * y}`,
      `H ${x + w - 8}`,
    ].join(' ');
  });

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