How to use the d3-selection.event.pageX 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 vasturiano / cartogram-chart / src / cartogram.js View on Github external
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
    });
  },
github edgarordonez / d3-stencil / src / components / line-chart / line-chart.tsx View on Github external
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],
      );
    };
github Vizzuality / trase / frontend / scripts / react-components / tool / sankey / sankey.component.js View on Github external
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);
  }
github beancount / fava / fava / static / javascript / charts.js View on Github external
.on("mousemove", () => {
      tooltip
        .style("left", `${event.pageX}px`)
        .style("top", `${event.pageY - 15}px`);
    })
    .on("mouseleave", () => {
github CartoDB / airship / src / components / StackedBar / stackedBar.js View on Github external
.on('mousemove', () => {
          select(this.tooltipNode).style('opacity', 0);
          this.showTooltip(event.pageX, event.pageY);
        })
        .attr('class', () => `bar bar-${key}`)
github edgarordonez / d3-stencil / src / components / bcg-matrix-chart / bcg-matrix-chart.tsx View on Github external
const toShow = () => {
      this.tooltipEl.show(`${data.tooltipInfo}`, [event.pageX, event.pageY]);
    };
github onap / sdc / dox-sequence-diagram-ui / src / main / webapp / lib / ecomp / asdc / sequencer / components / diagram / Diagram.jsx View on Github external
.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', () => {
github khartec / waltz / waltz-ng / client / roadmap / components / roadmap-scenario-diagram / roadmap-scenario-diagram.js View on Github external
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());
}
github GlobalFishingWatch / map-client / app / src / timebar / components / Timebar.jsx View on Github external
d3select('body').on('mousemove', () => {
      if (dragging) {
        const nx = d3event.pageX - leftOffset - X_OVERFLOW_OFFSET;
        if (currentHandleIsWest) {
          currentOuterPxExtent[0] = nx;
        } else {
          currentOuterPxExtent[1] = nx;
        }
      }
    });