How to use the d3-selection.event.selection function in d3-selection

brushed() {
    /**
         * Should only be called  on active brushing, not in response to the
         * draw event
         */
    const s = event.selection;

    if (!this._xScale || !this._yScale) { return; }

    const xDomain = this.viewportXDomain;

    const yDomain = [this._yScale.invert(s[0][1]),
      this._yScale.invert(s[1][1])];

    // console.log('xDomain:', xDomain);
    // console.log('yDomain:', yDomain);

    this.setDomainsCallback(xDomain, yDomain);
  }

brushed() {
    /**
         * Should only be called  on active brushing, not in response to the
         * draw event
         */
    const s = event.selection;

    if (!this._xScale || !this._yScale) { return; }

    const xDomain = [this._xScale.invert(s[0][0]),
      this._xScale.invert(s[1][0])];

    const yDomain = this.viewportYDomain;

    // console.log('xDomain:', xDomain);
    // console.log('yDomain:', yDomain);

    this.setDomainsCallback(xDomain, yDomain);
  }

onMultiBrush() {
    if (!d3Event.sourceEvent || this._clearing) {
      return;
    }
    const selection = d3Event.selection;

    if (!selection) {
      return this.clearSelection();
    }

    let scale = this.effectiveScale;
    // var isRange = false;

    const xScale = this.xScale;
    let sel;

    if (scale = scale.x) {
      sel = scale.y ? selection[0] : selection;
      if (scale.invert) {
        // isRange = true;
        this.isRange = true;

onInnerBrushMoved() {
    let newExtentPx = d3event.selection;
    const newExtent = this.getExtent(d3event.selection);

    const maxTimeRange = (window.extendedMaxTimeRange === true) ? TIMELINE_MAX_TIME * 4 : TIMELINE_MAX_TIME;

    // time range is too long
    if (newExtent[1].getTime() - newExtent[0].getTime() > maxTimeRange) {
      const oldExtent = this.props.timelineInnerExtent;

      if (oldExtent[0].getTime() === newExtent[0].getTime()) {
        // right brush was moved
        newExtent[1] = new Date(oldExtent[0].getTime() + maxTimeRange);
      } else {
        // left brush was moved
        newExtent[0] = new Date(oldExtent[1].getTime() - maxTimeRange);
      }
      newExtentPx = this.getPxExtent(newExtent);

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

.on('start', () => {
            if (d3Event.selection) {
              vm.isBrushing = true;
              vm.hovered = null;
            }
          })
          .on('brush', function () {

_onBrushEnd() {
    if (!d3_event.sourceEvent) return;
    if (!d3_event.selection) return;

    var d0 = d3_event.selection.map(this.xScale.invert),
      d1 = d0.map(d3_time_timeYear.round);

    if (d1[0] >= d1[1]) {
      d1[0] = d3_time_timeYear.floor(d0[0]);
      d1[1] = d3_time_timeYear.offset(d0[1]);
    }

    const pixelSelection = d1.map(this.xScale);

    this._moveBrushOverlay(pixelSelection);

    this.brush.transition()
      .call(d3_event.target.move, pixelSelection);

    var startYear = new Date (d1[0]).getFullYear();
    var endYear = new Date (d1[1]).getFullYear() - 1;

d => (
        d.type === 'n' ?
          event.selection[0] :
          event.selection[1] - (BRUSH_HEIGHT / 2)
      ));

brushed() {
    /**
     * Should only be called  on active brushing, not in response to the
     * draw event
     */
    const s = event.selection;

    if (!this._xScale || !this._yScale) { return; }

    const xDomain = [this._xScale.invert(s[0][0]),
      this._xScale.invert(s[1][0])];

    const yDomain = [this._yScale.invert(s[0][1]),
      this._yScale.invert(s[1][1])];

    this.setDomainsCallback(xDomain, yDomain);
  }

onMultiBrushEnd() {
    if (!d3Event.selection && !this._clearing) {
      this._clearing = true;
      this.clearSelection();
    }

    delete this._clearing;
    this.isSelecting = false;
  }