How to use the d3-selection.event.clientX 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 tmrowco / electricitymap-contrib / web / src / main.js View on Github external
.onExchangeMouseMove((zoneData) => {
          const { co2intensity } = zoneData;
          if (co2intensity) {
            dispatchApplication('co2ColorbarValue', co2intensity);
          }
          dispatch({
            type: 'SHOW_TOOLTIP',
            payload: {
              data: zoneData,
              displayMode: MAP_EXCHANGE_TOOLTIP_KEY,
              position: { x: currentEvent.clientX, y: currentEvent.clientY },
            },
          });
        })
        .onExchangeMouseOut((d) => {
github openstreetmap / iD / modules / ui / background.js View on Github external
function dragOffset() {
            if (d3_event.button !== 0) return;
            var origin = [d3_event.clientX, d3_event.clientY];

            context.container()
                .append('div')
                .attr('class', 'nudge-surface');

            d3_select(window)
                .on('mousemove.offset', function() {
                    var latest = [d3_event.clientX, d3_event.clientY];
                    var d = [
                        -(origin[0] - latest[0]) / 4,
                        -(origin[1] - latest[1]) / 4
                    ];

                    origin = latest;
                    nudge(d);
                })
github openstreetmap / iD / modules / ui / photoviewer.js View on Github external
return function initResize() {
                startX = d3_event.clientX;
                startY = d3_event.clientY;
                startWidth = target.node().getBoundingClientRect().width;
                startHeight = target.node().getBoundingClientRect().height;

                d3_select(window)
                    .on('mousemove.' + eventName, startResize, false)
                    .on('mouseup.' + eventName, stopResize, false);
            };
        }
github Vizzuality / TRASE-frontend / scripts / components / profiles / line.component.js View on Github external
this.circles.on('mousemove', function(d) {
                this.showTooltipCallback(
                  d,
                  d3_event.clientX + 10,
                  d3_event.clientY + window.scrollY + 10
                );
              }.bind(this))
              .on('mouseout', function() {
github Vizzuality / trase / frontend / scripts / react-components / profile / profile-components / scatterplot / scatterplot.component.jsx View on Github external
.on('mousemove', d => {
          const selectedSwitcher = this.props.xDimension[this.state.selectedTabIndex];
          showTooltipCallback(
            d,
            selectedSwitcher,
            d3_event.clientX + 10,
            d3_event.clientY + scrollOffset() + 10
          );
        })
        .on('mouseout', () => {
github d3 / d3-zoom / src / zoom.js View on Github external
function mousedowned() {
    if (touchending || !filter.apply(this, arguments)) return;
    var g = gesture(this, arguments, true),
        v = select(event.view).on("mousemove.zoom", mousemoved, true).on("mouseup.zoom", mouseupped, true),
        p = mouse(this),
        x0 = event.clientX,
        y0 = event.clientY;

    dragDisable(event.view);
    nopropagation();
    g.mouse = [p, this.__zoom.invert(p)];
    interrupt(this);
    g.start();

    function mousemoved() {
      noevent();
      if (!g.moved) {
        var dx = event.clientX - x0, dy = event.clientY - y0;
        g.moved = dx * dx + dy * dy > clickDistance2;
      }
      g.zoom("mouse", constrain(translate(g.that.__zoom, g.mouse[0] = mouse(g.that), g.mouse[1]), g.extent, translateExtent));
    }
github Vizzuality / TRASE-frontend / scripts / components / profiles / scatterplot.component.js View on Github external
this.circles.on('mousemove', function(d) {
        const selectedSwitcher = document.querySelector('.js-scatterplot-switcher-item.selected span');

        this.showTooltipCallback(
          d,
          {
            name: selectedSwitcher.innerHTML,
            unit: selectedSwitcher.getAttribute('data-unit'),
          },
          d3_event.clientX + 10,
          d3_event.clientY + window.scrollY + 10
        );
      }.bind(this))
      .on('mouseout', function() {
github Vizzuality / TRASE-frontend / scripts / components / profiles / map.component.js View on Github external
polygons.on('mousemove', function(d) {
        showTooltipCallback(d, d3_event.clientX + 10, d3_event.clientY + window.scrollY + 10);
      } )
      .on('mouseout', function() {
github tmrowco / electricitymap-contrib / web / src / main.js View on Github external
}).onMouseMove(() => {
  lowcarbInfoTooltip.update(currentEvent.clientX, currentEvent.clientY)
}).onMouseOut(() => {
  lowcarbInfoTooltip.hide();