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

valueScaleZoom() {
    const myWheelDelta = (dy, dm) => dy * (dm ? 120 : 1) / 500;

    if (event.sourceEvent && event.sourceEvent.deltaY) {
      // mouse move probably from a drag event
      const dy = event.sourceEvent.deltaY;
      const dm = event.sourceEvent.deltaMode;

      const mwd = myWheelDelta(dy, dm);

      const cp = clientPoint(this.props.canvasElement, event.sourceEvent);
      for (const track of this.getTracksAtPosition(...cp)) {
        track.zoomedY(cp[1] - track.position[1], 2 ** mwd);
      }
    } else if (event.sourceEvent && event.sourceEvent.movementY) {
      // mouse wheel from zoom event
      // const cp = clientPoint(this.props.canvasElement, event.sourceEvent);
      for (const track of this.getTracksAtPosition(...this.zoomStartPos)) {
        track.movedY(event.sourceEvent.movementY);
      }
    }

    // reset the zoom transform
    this.zoomTransform = this.zoomStartTransform;
  }

valueScaleZoom(orientation) {
    // mouse move probably from a drag event
    const mdy = event.sourceEvent.deltaY;
    const mdm = event.sourceEvent.deltaMode;

    const myWheelDelta = (dy, dm) => dy * (dm ? 120 : 1) / 500;
    const mwd = myWheelDelta(mdy, mdm);

    const cp = clientPoint(this.props.canvasElement, event.sourceEvent);

    for (const track of this.getTracksAtPosition(...cp)) {
      const yPos = orientation === '1d-horizontal'
        ? cp[1] - track.position[1] : cp[0] - track.position[0];
      track.zoomedY(yPos, 2 ** mwd);
    }


    // reset the zoom transform
    this.zoomTransform = this.zoomStartTransform;
  }

}

    if (r.rangeType === 'line') {
      const isFirstValue = start.toString() === xScale.domain()[0].toString();
      // need to nudge start value over if column, except if it's the very first col
      if (!isFirstValue) {
        const xStartVal = obj.options.type === 'column' ? startVal - obj.rendered.plot.singleColumn : startVal;
        start = accessor(xStartVal);
      }
    }

    data = { axis };

    // if has r.rangeStart and target of event was the overlay
    // rect we're creating a new range, so increment id by 1
    if (r.rangeStart && typeof event.sourceEvent.target === 'object') {
      const brushMoving = select(node).classed('brushmove');
      // need to determine if brush is just moving, handle is moving, or it's a new brush
      if (r.rangeType === 'area') {
        const usingHandles = start.toString() === r.rangeStart || end.toString() === r.rangeEnd;
        if (!usingHandles && !brushMoving) id++;
      }

      if (r.rangeType === 'line' && !brushMoving) id++;
    }

    if (r.rangeType === 'area') {
      data.start = start;
      data.end = end;
      if (start === end) data = null;
    } else {
      data.start = start;

function datum() {
        var event = d3_event && d3_event.sourceEvent;
        if (!event || event.altKey) {
            return {};
        } else {
            // When dragging, snap only to touch targets..
            // (this excludes area fills and active drawing elements)
            var d = event.target.__data__;
            return (d && d.properties && d.properties.target) ? d : {};
        }
    }

zoomStarted() {
    this.zooming = true;

    if (event.sourceEvent) {
      this.zoomStartPos = clientPoint(this.props.canvasElement, event.sourceEvent);

      if (event.sourceEvent.shiftKey) {
        this.valueScaleZooming = true;
      }
    }

    // store the current transform because we'll need to
    // revert it if this turns out to be a value scale zoom
    this.zoomStartTransform = this.zoomTransform;
    this.props.pubSub.publish('app.zoomStart');
  }

_onResizeZoom = () => {
        // This is an early return in order to avoid processing brush event
        if (d3Event.sourceEvent && d3Event.sourceEvent.target.name === "brush") {
            return;
        }

        const { transform } = d3Event;

        // We apply the zoom transformation to rescale densityChartScale.
        // Then we get the new domain, this is the new domain for the histogram x scale
        const brushedDomain = transform.rescaleX(this.densityChartXScale).domain();

        // if the max value of the brushed domain is greater than the max value of the overallTimeDomain imposed
        // by the data we should avoid the scrolling in that area because it doesn't make any sense.
        if (brushedDomain[1] >= this.state.overallTimeDomain.max) {
            // Here we get the delta of the brush domain
            const brushDomainInterval = brushedDomain[1].getTime() - brushedDomain[0].getTime();

            // And apply that in this min value of the brush domain in order to keep that interval

const generateOEndMappingFn = projectedColumns => (d): null | Array => {
  if (
    d &&
    event.sourceEvent &&
    event.sourceEvent.path &&
    event.sourceEvent.path[1] &&
    event.sourceEvent.path[1].classList.contains("xybrush") &&
    event.target.move
  ) {
    const columnValues: BaseColumnType[] = Object.values(projectedColumns)
    const foundColumns: BaseColumnType[] = columnValues.filter(
      (c: BaseColumnType) => d[1] >= c.x && d[0] <= c.x + c.width
    )

    const firstColumn: { x: number; width: number } = foundColumns[0] || {
      x: 0,
      width: 0
    }

    const lastColumn: { x: number; width: number } = foundColumns[

_brush.on('start', function () {
      if (event.sourceEvent !== null) {
        events.call('brushstart', pc, config.brushed, convertBrushArguments(arguments));
        if (typeof event.sourceEvent.stopPropagation === 'function') {
          event.sourceEvent.stopPropagation();
        }
      }
    }).on('brush', function () {
      brushUpdated(config, pc, events, convertBrushArguments(arguments))(selected(state, config, brushGroup)());

const generateOEndMappingFn = projectedColumns => (d): null | Array => {
  if (
    d &&
    event.sourceEvent &&
    event.sourceEvent.path &&
    event.sourceEvent.path[1] &&
    event.sourceEvent.path[1].classList.contains("xybrush") &&
    event.target.move
  ) {
    const columnValues: BaseColumnType[] = Object.values(projectedColumns)
    const foundColumns: BaseColumnType[] = columnValues.filter(
      (c: BaseColumnType) => d[1] >= c.x && d[0] <= c.x + c.width
    )

    const firstColumn: { x: number; width: number } = foundColumns[0] || {
      x: 0,
      width: 0
    }

    const lastColumn: { x: number; width: number } = foundColumns[
      foundColumns.length - 1

.on('start', (datum: MapDrawing) => {
        x = event.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x  + this.context.transformation.x);
        leftEdge = x + datum.element.width;
        document.body.style.cursor = 'ew-resize';
      })
      .on('drag', (datum: MapDrawing) => {