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

state.svg.on('mousemove', () => {
      state.tooltip
        .style('left', d3Event.pageX + 'px')
        .style('top', d3Event.pageY + 'px')
        .style('transform', `translate(-${d3Event.offsetX / state.width * 100}%, 21px)`); // adjust horizontal position to not exceed canvas boundaries
    });
  },

const toShow = (): void => {
      this.tooltipEl.show(
        `${formatter(
          this.graphDataMerged.lineChart.axis.y.format,
          data,
          this.graphDataMerged.lineChart.axis.y.currency,
        )} <br> ${formatter(
          this.graphDataMerged.lineChart.axis.x.format,
          this.graphDataMerged.labels[index],
          this.graphDataMerged.lineChart.axis.x.currency,
        )}`,
        [event.pageX, event.pageY],
      );
    };

const values = [
      {
        title: this.selectedResizeBy.label,
        unit: this.selectedResizeBy.unit,
        value: formatValue(link.quant, this.selectedResizeBy.label)
      }
    ];

    if (this.currentSelectedRecolorBy) {
      values.push({
        title: this.currentSelectedRecolorBy.label,
        value: this._getLinkValue(link)
      });
    }

    this.linkTooltip.show(d3_event.pageX, d3_event.pageY, title, values);
  }

.on("mousemove", () => {
      tooltip
        .style("left", `${event.pageX}px`)
        .style("top", `${event.pageY - 15}px`);
    })
    .on("mouseleave", () => {

.on('mousemove', () => {
          select(this.tooltipNode).style('opacity', 0);
          this.showTooltip(event.pageX, event.pageY);
        })
        .attr('class', () => `bar bar-${key}`)

const toShow = () => {
      this.tooltipEl.show(`${data.tooltipInfo}`, [event.pageX, event.pageY]);
    };

.on('mouseenter', function f() {
                self.events.message = { x: d3event.pageX, y: d3event.pageY };
                timer = setTimeout(() => {
                    self.application.selectMessage(
                        select(this.parentNode).attr('data-id')
                    );
                }, 200);
            })
            .on('mouseleave', () => {

function showInfoPopup(html) {
    return select(`.${styles.INFOPOP}`)
        .style("left", (event.pageX - 2) + "px")
        .style("top", (event.pageY - 2) + "px")
        .style("display", "block")
        .html(html)
        .select(`.${styles.INFOPOP_CLOSE}`)
        .on("click", () => hideInfoPopup());
}

d3select('body').on('mousemove', () => {
      if (dragging) {
        const nx = d3event.pageX - leftOffset - X_OVERFLOW_OFFSET;
        if (currentHandleIsWest) {
          currentOuterPxExtent[0] = nx;
        } else {
          currentOuterPxExtent[1] = nx;
        }
      }
    });