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

To help you get started, we’ve selected a few d3-selection examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github broadinstitute / gtex-viz / src / modules / Tooltip.js View on Github external
    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`)
    }
github khartec / waltz / waltz-ng / client / common / d3-context-menu.js View on Github external
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();
    };
}
github GNS3 / gns3-web-ui / src / app / cartography / widgets / node.ts View on Github external
.on('click', (node: MapNode) => {
        this.nodesEventSource.clicked.emit(new ClickedDataEvent(node, event.pageX, event.pageY));
      });
github edgarordonez / d3-stencil / src / components / pie-chart / pie-chart.tsx View on Github external
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],
      );
    };
github nicgirault / circosJS / src / behaviors / tooltip.js View on Github external
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')
  })
github chanzuckerberg / idseq-web / app / assets / src / components / visualizations / dendrogram / Dendogram.js View on Github external
.on("mousemove", node => {
          if (!node.children) {
            this.tooltipContainer
              .style("left", currentEvent.pageX + 20 + "px")
              .style("top", currentEvent.pageY + 20 + "px");
          }
        })
        .on("mouseleave", () => {
github edgarordonez / d3-stencil / src / components / horizontal-bar-chart / horizontal-bar-chart.tsx View on Github external
const toShow = () =&gt; {
      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],
      );
    };
github khartec / waltz / waltz-ng / client / roadmap / components / roadmap-scenario-diagram / roadmap-scenario-diagram.js View on Github external
function mkDialogStyle() {
    return {
        display: "block",
        position: "absolute",
        left: `${event.pageX - 2}px`,
        top: `${event.pageY - 100}px`
    };
}
github hpcc-systems / Visualization / packages / other / src / Opportunity.ts View on Github external
.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) {