How to use the d3.mouse function in d3

.on('mousemove', function(d) {
            if(state.linePickActive() && d.lineLayer && callbacks && callbacks.hover) {
                var event = d3.event;
                var cw = this.width;
                var ch = this.height;
                var pointer = d3.mouse(this);
                var x = pointer[0];
                var y = pointer[1];

                if(x < 0 || y < 0 || x >= cw || y >= ch) {
                    return;
                }
                var pixel = d.lineLayer.readPixel(x, ch - 1 - y);
                var found = pixel[3] !== 0;
                // inverse of the calcPickColor in `lines.js`; detailed comment there
                var curveNumber = found ? pixel[2] + 256 * (pixel[1] + 256 * pixel[0]) : null;
                var eventData = {
                    x: x,
                    y: y,
                    clientX: event.clientX,
                    clientY: event.clientY,
                    dataIndex: d.model.key,

position: function (d, width, height, element) {
                        var left = d3.mouse(chart.element)[0] - (width / 2);
                        var top = d3.mouse(chart.element)[1] - height;
                        return {
                            top: top - 8, // 8 - offset for tooltip arrow
                            left: left
                        };
                    },
                    contents: function (d, defaultTitleFormat, defaultValueFormat, color) {

function singleClick(d, i) {
          // single click handler
          const overCoords = d3.mouse(model.container);
          const info = findGroupAndBin(overCoords);
          if (info.radius > veryOutermostRadius) {
            showAllChords();
          } else if (
            info.radius > outerRadius ||
            (info.radius <= innerRadius &&
              pmiChordMode.mode === PMI_CHORD_MODE_ONE_BIN_ALL_VARS &&
              info.group === pmiChordMode.srcParam)
          ) {
            if (info.found) {
              model.renderState.pmiAllBinsTwoVars = null;
              model.renderState.pmiOneBinAllVars = {
                group: info.group,
                bin: info.bin,
                d,
                i,

function handleZoom() {
        mouse1 = d3.mouse(this);

        if(outside(mouse0)) {
            zoom.scale(projection.scale());
            zoom.translate(projection.translate());
            return;
        }

        projection.scale(d3.event.scale);
        projection.translate([translate0[0], d3.event.translate[1]]);

        if(!zoomPoint) {
            mouse0 = mouse1;
            zoomPoint = position(mouse0);
        } else if(position(mouse1)) {
            point1 = position(mouse1);
            rotate1 = [lastRotate[0] + (point1[0] - zoomPoint[0]), rotate0[1], rotate0[2]];

.on('drag', function (d) {
            var newValue = Math.max(d3.mouse(this.parentNode)[0], 2);
            d.setWidth(newValue);
            d3.event.sourceEvent.stopPropagation();
        })
            .on('dragend', function () {

return function() {
      let m = d3.mouse(this);
      let x = _this.xScale.invert(m[0]);
      let y = _this.yScale.invert(m[1]);
      _this.pos = 'x: ' + x.toFixed(1) + ' y: ' + y.toFixed(1);
    }
  }

return function() {
    var p = d3.mouse(self.vis[0][0]),
        t = d3.event.changedTouches;

    if (self.dragged) {
      self.dragged.y = self.y.invert(Math.max(0, Math.min(self.size.height, p[1])));
      self.update();
    };
    if (!isNaN(self.downx)) {
      d3.select('body').style("cursor", "ew-resize");
      var rupx = self.x.invert(p[0]),
          xaxis1 = self.x.domain()[0],
          xaxis2 = self.x.domain()[1],
          xextent = xaxis2 - xaxis1;
      if (rupx != 0) {
        var changex, new_domain;
        changex = (self.downx - xaxis1) / (rupx - xaxis1);
        new_domain = [xaxis1, xaxis1 + (xextent * changex)];

private dragStartHandler = () => {
        this.dragging = false;
        this.dragStart = d3.mouse(this.background.node());
    }

onMouseMoveTooltip(d) {
    d3.event.stopPropagation();

    this.scope.plotLegend.removeLegendPointer();
    this.scope.plotLegend.drawLegendPointer(d);
    this.scope.tipmoving = true;

    this.tipTimeout && clearTimeout(this.tipTimeout);
    this.tipTimeout = setTimeout(() => {
      this.scope.tipmoving = false;
    }, 50);

    plotTip.movetooltip(this.scope, d, d3.mouse(this.scope.svg.node()));
  }

mouseover: function (hexLayer, data) {
				var event = d3.event;
				var gCoords = d3.mouse(this);

				tooltip
					.style('visibility', 'visible')
					.html(options.tooltipContent(data, hexLayer));

				var div = null;
				if (null != tooltip._groups && tooltip._groups.length > 0 && tooltip._groups[0].length > 0) {
					div = tooltip._groups[0][0];
				}
				var h = div.clientHeight, w = div.clientWidth;

				tooltip
					.style('top', '' + event.clientY - gCoords[1] - h - 16 + 'px')
					.style('left', '' + event.clientX - gCoords[0] - w/2 + 'px');

			},