How to use the d3-selection.event.target 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 openstreetmap / iD / modules / behavior / select.js View on Github external
function click() {
        d3_select(window)
            .on('mouseup.select', null, true);

        if (!p1) return;
        var p2 = point();
        var dist = geoVecLength(p1, p2);

        p1 = null;
        if (dist > tolerance) {
            return;
        }

        var isMultiselect = d3_event.shiftKey || d3_select('#surface .lasso').node();
        var isShowAlways = +context.storage('edit-menu-show-always') === 1;
        var datum = d3_event.target.__data__ || (lastMouse && lastMouse.target.__data__);
        var mode = context.mode();

        var entity = datum && datum.properties && datum.properties.entity;
        if (entity) datum = entity;

        if (datum && datum.type === 'midpoint') {
            datum = datum.parents[0];
        }

        if (datum instanceof osmEntity) {    // clicked an entity..
            var selectedIDs = context.selectedIDs();
            context.selectedNoteID(null);

            if (!isMultiselect) {
                if (selectedIDs.length > 1 && (!suppressMenu && !isShowAlways)) {
                    // multiple things already selected, just show the menu...
github carbon-design-system / carbon-charts / packages / core / src / components / essentials / tooltip.ts View on Github external
this.services.events.addEventListener("show-tooltip", e => {
			// check the type of tooltip and that it is enabled
			if ((e.detail.type === TooltipTypes.DATAPOINT && Tools.getProperty(this.model.getOptions(), "tooltip", "datapoint", "enabled"))
				|| (e.detail.type === TooltipTypes.GRIDLINE && Tools.getProperty(this.model.getOptions(), "tooltip", "gridline", "enabled")) ) {

				let data = select(event.target).datum() as any;

				// if there is a provided tooltip HTML function
				if (Tools.getProperty(this.model.getOptions(), "tooltip", "customHTML")) {
					tooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(data));
				} else if (e.detail.multidata) {
					// multi tooltip
					data = e.detail.multidata;
					tooltipTextContainer.html(this.getMultilineTooltipHTML(data));
				} else {
					tooltipTextContainer.html(this.getTooltipHTML(data));
				}

				// Position the tooltip
				this.positionTooltip();

				// Fade in
github CyberReboot / CRviz / src / features / visualization / d3-viz / setup-legend.js View on Github external
legend.on('click.toggle', () => {
    const datum = select(d3Event.target).datum();
    if (datum) {
      toggleValue(datum[0]);
    }
  })
}
github CyberReboot / CRviz / src / features / visualization / d3-viz.js View on Github external
nodeRoot.on("click.select", () => {
      const datum = select(d3Event.target).datum();
      if(datum.data !== undefined) {
        //Used to send data back to parent component Visualizations.js
        props.sendData(datum.data);
      };
      let zoomToNode = datum;
      
      if(datum.height === 0 && datum.parent){
        zoomToNode = datum.parent;
      }
      state.selectedNode = datum;
      state.zoom.zoomTo(zoomToNode);
    });
  };
github Vizzuality / TRASE-frontend / scripts / components / nav / years-brush / years-slider.component.js View on Github external
if (!d3_event.selection) return;

    var d0 = d3_event.selection.map(this.xScale.invert),
      d1 = d0.map(d3_time_timeYear.round);

    if (d1[0] >= d1[1]) {
      d1[0] = d3_time_timeYear.floor(d0[0]);
      d1[1] = d3_time_timeYear.offset(d0[1]);
    }

    const pixelSelection = d1.map(this.xScale);

    this._moveBrushOverlay(pixelSelection);

    this.brush.transition()
      .call(d3_event.target.move, pixelSelection);

    var startYear = new Date (d1[0]).getFullYear();
    var endYear = new Date (d1[1]).getFullYear() - 1;

    this.callback([startYear, endYear]);
  }
github Datawheel / canon / packages / cms / src / components / Search / Search.jsx View on Github external
select(document).on(`keydown.${id}`, () => {

      const {router} = this.context;
      const {active, results} = this.state;
      const key = event.keyCode;

      const DOWN = 40,
            ENTER = 13,
            ESC = 27,
            S = 83,
            UP = 38;

      if (primary && !active && key === S && !["input", "textarea"].includes(event.target.tagName.toLowerCase()) && !event.target.className.includes("ql-editor")) {
        event.preventDefault();
        this.onToggle.bind(this)();
      }
      else if (active && key === ESC && event.target === this.input) {
        event.preventDefault();
        this.onToggle.bind(this)();
      }
      else if (active && event.target === this.input) {

        const highlighted = document.querySelector(".highlighted");
        const listItems = document.querySelectorAll(".results > li");
        const currentIndex = [].indexOf.call(listItems, highlighted);
        const d = results[currentIndex];

        if (key === ENTER && highlighted) {
          this.input.blur();
github openstreetmap / iD / modules / ui / background_display_options.js View on Github external
function updateValue(d, val) {
        if (!val && d3_event && d3_event.target) {
            val = d3_event.target.value;
        }

        val = clamp(val, minVal, maxVal);

        _options[d] = val;
        context.background()[d](val);

        if (d === 'brightness') {
            context.storage('background-opacity', val);
        }

        _selection
            .call(render);
    }
github nteract / semiotic / src / components / InteractionLayer.tsx View on Github external
const lastColumn: { x: number; width: number } = foundColumns[
      foundColumns.length - 1
    ] || {
      x: 0,
      width: 0
    }

    const columnPosition = [
      firstColumn.x + Math.min(5, firstColumn.width / 10),
      lastColumn.x + lastColumn.width - Math.min(5, lastColumn.width / 10)
    ]

    select(event.sourceEvent.path[1])
      .transition(750)
      .call(event.target.move, columnPosition)

    return foundColumns
  }
  return null
}
github openstreetmap / iD / modules / ui / modal.js View on Github external
shaded.on('click.remove-modal', () => {
      if (d3_event.target === this) {
        shaded.close();
      }
    });
github openstreetmap / iD / modules / behavior / drag.js View on Github external
delegate = function() {
                var root = this;
                var target = d3_event.target;
                for (; target && target !== root; target = target.parentNode) {
                    var datum = target.__data__;

                    var entity = datum instanceof osmNote ?
                        datum : datum && datum.properties && datum.properties.entity;

                    if (entity && target[matchesSelector](_selector)) {
                        return dragstart.call(target, entity);
                    }
                }
            };
        }