How to use the d3-brush.brush function in d3-brush

this.disableBrush();
      }
    );

    this.removeSelectionChanged = removeSelectionChanged;
    this.setDomainsCallback = setDomainsCallback;

    this.selectionXDomain = null;
    this.selectionYDomain = null;

    if (context.xDomain) {
      // track has an x-domain set
      this.selectionXDomain = context.xDomain;
    }

    this.brush = brush(true)
      .on('brush', this.brushed.bind(this))
      .on('end', this.brushEnded.bind(this));

    this.gBrush = null;
    this.selected = null;

    // the selection will call this.selectionChanged immediately upon
    // hearing registerSelectionChanged
    this.draw();

    this.prevZoomLevel = 0;

    registerSelectionChanged(uid, this.selectionChanged.bind(this));
  }

.attr("transform", "rotate(30, -10, 10)");

        // add the y axis
        dom.append("g")
            .attr("class", "violin-axis axis--y")
            .attr("transform", `translate(-${buffer}, 0)`)
            .call(this.yAxis)
            .append('text')
             .attr('transform', 'rotate(-90)')
             .attr('y', -40)
             .attr('dy', '.1em')
             .attr('text-anchor', 'end')
             .text(yLabel);

        // add the brush
        let theBrush = brush();
        theBrush.on("end", () => {this.zoom(dom, theBrush)});

        dom.append("g")
            .attr("class", "brush")
            .call(theBrush);

    }

var selection = this.brush_sel
  var selectable_selection = map.sel.selectAll('#nodes,#text-labels')
  var size_and_location = map.canvas.size_and_location()
  var width = size_and_location.width
  var height = size_and_location.height
  var x = size_and_location.x
  var y = size_and_location.y

  // Clear existing brush
  selection.selectAll('*').remove()

  // Set a flag so we know that the brush is being cleared at the end of a
  // successful brush
  var clearing_flag = false

  var brush = d3_brush()
      .extent([ [ x, y ], [ x + width, y + height ] ])
      .on('start', function () {
        turn_off_crosshair(selection)
        // unhide secondary metabolites if they are hidden
        if (map.settings.get('hide_secondary_metabolites')) {
          map.settings.set('hide_secondary_metabolites', false)
          map.draw_everything()
          map.set_status('Showing secondary metabolites. You can hide them ' +
                         'again in Settings.', 2000)
        }
      })
      .on('brush', function () {
        var shift_key_on = d3_selection.event.sourceEvent.shiftKey
        var rect = d3_brushSelection(this)
        // Check for no selection (e.g. after clearing brush)
        if (rect !== null) {

setDomainsCallback,
    } = context;

    const uid = slugid.nice();
    this.uid = uid;
    this.options = options;

    this.removeViewportChanged = removeViewportChanged;
    this.setDomainsCallback = setDomainsCallback;

    this.viewportXDomain = null;
    this.viewportYDomain = null;

    const maxHalf = Number.MAX_VALUE / 2;

    this.brush = brush(true)
      .extent([[-maxHalf, -maxHalf], [maxHalf, maxHalf]])
      .on('brush', this.brushed.bind(this));

    this.gBrush = this.gMain
      .append('g')
      .attr('id', `brush-${this.uid}`)
      .call(this.brush);

    /*
    // This is used to draw a border that is completely outside of the
    // drawn rectangle
    this.gBorder = this.gMain
      .append('path')
      .style('pointer-events', 'none');
    */

? null
          : [yScale.invert(d[0]), yScale.invert(d[1])].sort((a, b) => a - b)
      semioticBrush = brushY()
      selectedExtent = castExtent.map(d => yScale(d)).sort((a, b) => a - b)
      endMappingFn = mappingFn
    } else {
      const castExtent = extent as number[][]
      if (
        castExtent.indexOf(undefined) !== -1 ||
        castExtent[0].indexOf(undefined) !== -1 ||
        castExtent[1].indexOf(undefined) !== -1
      ) {
        return

constructor(props) {
    super(props);

    this.state = {
      isVisible: false,
    };

    this.brushBehaviorX = brushX(true, true)
      .on('brush', this.brushedX.bind(this))
      .on('end', this.brushedXEnded.bind(this));

    this.brushBehaviorY = brushY(true, true, true)
      .on('brush', this.brushedY.bind(this))
      .on('end', this.brushedYEnded.bind(this));

    this.brushBehaviorXY = brush(true)
      .on('start', this.brushStarted.bind(this))
      .on('brush', this.brushedXY.bind(this))
      .on('end', this.brushedXYEnded.bind(this));
  }

addBrush(dom){
        const theBrush = brush();
        theBrush.on("end", ()=>{this.zoom(dom, theBrush)});
        dom.append("g")
            .attr("class", "brush")
            .call(theBrush);
    }

? null
          : [yScale.invert(d[0]), yScale.invert(d[1])].sort((a, b) => a - b)
      semioticBrush = brushY()
      selectedExtent = castExtent.map(d => yScale(d)).sort((a, b) => a - b)
      endMappingFn = mappingFn
    } else {
      const castExtent = extent as number[][]
      if (
        castExtent.indexOf(undefined) !== -1 ||
        castExtent[0].indexOf(undefined) !== -1 ||
        castExtent[1].indexOf(undefined) !== -1
      ) {
        return