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

    move(x = event.pageX, y = event.pageY) {
        if (this.verbose) {
            console.log(x);
            console.log(y);
        }
        x = x + this.offsetX; // TODO: get rid of the hard-coded adjustment
        y = (y + this.offsetY)<0?10:y+this.offsetY;
        const t = select('#'+this.id)
            .style("left", `${x}px`)
            .style("top", `${y}px`)
    }

closeCallback(result);
                }
            });

        // the openCallback allows an action to fire before the menu is displayed
        // an example usage would be closing a tooltip
        if (openCallback) {
            if (openCallback(data, index) === false) {
                return;
            }
        }

        // display context menu
        select(".d3-context-menu")
            .style("left", (event.pageX - 2) + "px")
            .style("top", (event.pageY - 2) + "px")
            .style("display", "block");

        event.preventDefault();
        event.stopPropagation();
    };
}

.on('click', (node: MapNode) => {
        this.nodesEventSource.clicked.emit(new ClickedDataEvent(node, event.pageX, event.pageY));
      });

const toShow = (): void => {
      this.tooltipEl.show(
        `${formatter(
          this.graphDataMerged.pieChart.dataFormat,
          data.data,
          this.graphDataMerged.pieChart.currency,
        )} <br>
        ${formatter(
          this.graphDataMerged.pieChart.labelFormat,
          this.graphDataMerged.labels[data.index],
          this.graphDataMerged.pieChart.currency,
        )}`,
        [event.pageX, event.pageY],
      );
    };

track.dispatch.on('mouseover', (d) => {
    instance.tip
      .html(trackParams.tooltipContent(d))
      .transition()
      .style('opacity', 0.9)
      .style('left', (event.pageX) + 'px')
      .style('top', (event.pageY - 28) + 'px')
  })

.on("mousemove", node => {
          if (!node.children) {
            this.tooltipContainer
              .style("left", currentEvent.pageX + 20 + "px")
              .style("top", currentEvent.pageY + 20 + "px");
          }
        })
        .on("mouseleave", () => {

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

function mkDialogStyle() {
    return {
        display: "block",
        position: "absolute",
        left: `${event.pageX - 2}px`,
        top: `${event.pageY - 100}px`
    };
}

.on("mouseover", function (d, i) {
                    context.tooltipdiv.transition()
                        .duration(200)
                        .style("opacity", 0.9);
                    let tooltipHtml = "";
                    const mouseHoverMapping = context.mouseHover();
                    mouseHoverMapping.forEach(function (obj, index) {
                        if (obj.hoverValue() !== undefined) {
                            tooltipHtml = tooltipHtml + "<span style="font-weight:bold">" + obj.hoverValue() + ":  " + "</span>" + d[obj.hoverList()] + "<br>";
                        }
                    });
                    context.tooltipdiv.html(tooltipHtml)
                        .style("left", (d3Event.pageX) + "px")
                        .style("top", (d3Event.pageY - 100) + "px");
                })
                .on("mouseout", function (d) {