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

componentDidMount() {
    // We want the React app to respond to brush state and vice-versa
    // but d3-brush fires the same events for both user-initiated brushing
    // and programmatic brushing (brush.move). We need these flags to
    // distinguish between the uses.
    //
    // We don't use state because that would trigger another `componentDidUpdate`

    this.brushing = false;
    this.moving = false;

    this.root = select(this.rootContainer.current);
    this.brush = brushX()
      .on('start', () => {
        this.brushing = true;
      })
      .on('brush', () => {
        if (this.moving) {
          return;
        }
        event.selection === null ? this._reset() : this._brush(event.selection);
      })
      .on('end', () => {
        if (!this.moving && event.selection === null) {
          this._reset();
        }

        this.brushing = false;
        this.moving = false;

// To get the starting and ending dates within which data value is > 0
    this.getDataRangePoints();

    // this.x.domain(d3Array.extent(this.data, (d: Date) => d ));

    this.x.domain([this.dataStartDate, this.dataEndDate]);
    // Note : You can add '.nice()' function at the end of this.x.domain() to have evenly spaced ticks with starting and
    //        ending point included

    // this.x2.domain(d3Array.extent(this.data, (d: Date) => d ));

    this.x2.domain([this.dataStartDate, this.dataEndDate]);
    // Note : You can add '.nice()' function at the end of this.x.domain() to have evenly spaced ticks with starting and
    //        ending point included

    this.brush = d3Brush
      .brushX()
      .extent([[0, 0], [this.timeLineWidth, this.height2 / 2]])
      .on('brush end', this.brushed.bind(this));

    this.brush2 = d3Brush
      .brushX()
      .extent([[0, 0], [this.width, this.height]])
      .on('brush end', this.areaHighlighter.bind(this));

    this.zoom = d3Zoom
      .zoom()
      .scaleExtent([1, Infinity])
      .translateExtent([[0, 0], [this.width, this.height]])
      .extent([[0, 0], [this.width, this.height]])
      .on('zoom', this.zoomed.bind(this));

addBrush(): void {
    if (this.brush) return;

    const height = this.height;
    const width = this.view[0];

    this.brush = brushX()
      .extent([[0, 0], [width, height]])
      .on('brush end', () => {
        const selection = d3event.selection || this.xScale.range();
        const newDomain = selection.map(this.xScale.invert);
        //console.log(selection);

        this.onDomainChange.emit(newDomain);
        this.cd.markForCheck();
      });

    select(this.element)
      .select('.brush')
      .call(this.brush);
  }

addBrush(): void {
    if (this.brush) return;

    const height = this.height;
    const width = this.view[0];

    this.brush = brushX()
      .extent([
        [0, 0],
        [width, height]
      ])
      .on('brush end', () => {
        const selection = d3event.selection || this.xScale.range();
        const newDomain = selection.map(this.xScale.invert);

        this.onDomainChange.emit(newDomain);
        this.cd.markForCheck();
      });

    select(this.element)
      .select('.brush')
      .call(this.brush);
  }

onChange: val => {
          if (this.updateColorOnChange) {
            updateBarColor(val);
          }
          this.$emit("change", val);
        }
      });

      setTimeout(
        () => updateBarColor(histSlider.result),
        this.transitionDuration + 10
      );
    };

    if (this.clip) {
      brush = d3Brush.brushX().on("end", () => {
        var extent = d3Select.event.selection;
        if (extent) {
          var domain = [x.invert(extent[0]), x.invert(extent[1])];
          x.domain(domain);
          const pos = {
            form: Math.max(domain[0], histSlider.result.from),
            to: Math.min(domain[1], histSlider.result.to)
          };
          this.$emit("finish", pos);
          this.$emit("change", pos);

          updateHistogram(domain);
          hist.call(brush.clear);
        }
      });
      hist.call(brush);

initialize() {
        this.chartX = scaleLinear();
        this.brushX = scaleLinear();
        this.sorter = getComparator({sorter: 'sorter.name', ascending: true});

        this.brush = brushX().on('start brush end', this.onBrushChange.bind(this));
        this.tooltip = new TooltipView({position: 'bottom'});
        this.collection.applyFilterAndSorting(()=>1, this.sorter);
        this.minDuration = this.collection.time.minDuration;
        this.maxDuration = this.collection.time.maxDuration;
        this.selectedDuration = this.minDuration;
        this.data = this.collection.toJSON();
        this.total = this.collection.allResults.length;
        this.timeOffset = (d) => (d - this.collection.time.start);
    }

constructor(props) {
    super(props);

    this.brushBehavior = brushX(true)
      .on('start', this.brushStarted.bind(this))
      .on('brush', this.brushed.bind(this))
      .on('end', this.brushedEnded.bind(this));
  }

[xScale.invert(size[0]), yScale.invert(size[1])]
          ]
        : actualBrush === "xBrush"
        ? [xScale.invert(0), xScale.invert(size[0])]
        : [yScale.invert(0), yScale.invert(size[1])]
    } = interaction

    if (extent.indexOf && extent.indexOf(undefined) !== -1) {
      return