How to use the d3.event function in d3

To help you get started, we’ve selected a few d3 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 plotly / plotly.js / src / traces / parcats / parcats.js View on Github external
if(catBelow !== undefined) {
            if((categoryY + dragCategory.height) > (catBelow.y + catBelow.height / 2.0)) {
                // Swap display inds
                dragCategory.model.displayInd = catBelow.model.displayInd;
                catBelow.model.displayInd = catDisplayInd;
            }
        }

        // Update category drag display index
        d.dragCategoryDisplayInd = dragCategory.model.displayInd;
    }

    // Update dimension position
    if(d.dragCategoryDisplayInd === null || d.parcatsViewModel.arrangement === 'freeform') {
        dragDimension.model.dragX = d3.event.x;

        // Check for dimension swaps
        var prevDimension = d.parcatsViewModel.dimensions[prevDimInd];
        var nextDimension = d.parcatsViewModel.dimensions[nextDimInd];

        if(prevDimension !== undefined) {
            if(dragDimension.model.dragX < (prevDimension.x + prevDimension.width)) {
                // Swap display inds
                dragDimension.model.displayInd = prevDimension.model.displayInd;
                prevDimension.model.displayInd = dragDimInd;
            }
        }

        if(nextDimension !== undefined) {
            if((dragDimension.model.dragX + dragDimension.width) > nextDimension.x) {
                // Swap display inds
github tribe29 / checkmk / web / htdocs / js / modules / node_visualization / node_visualization_layouting.js View on Github external
this.layout_manager.toolbar_plugin.layout_style_configuration.show_style_configuration(dragged_node_datum.data.use_style);
            }
        }


        let scale = 1.0
        let delta_x = d3.event.x - this.drag_start_x
        let delta_y = d3.event.y - this.drag_start_y

        let last_zoom = this.layout_manager.viewport.last_zoom
        scale = 1/last_zoom.k

        this._apply_drag_force(dragged_node_datum, this.drag_start_x + (delta_x * scale),
                                                 this.drag_start_y + (delta_y * scale))

        let node_data = d3.select(d3.event.sourceEvent.target).datum()
        node_visualization_layout_styles.force_simulation.restart_with_alpha(0.5)
        if (dragged_node_datum.data.use_style) {
            dragged_node_datum.data.use_style.force_style_translation()
            dragged_node_datum.data.use_style.translate_coords()
        }
        this.layout_manager.compute_node_position(dragged_node_datum)


        // TODO: EXPERIMENTAL, will be removed in later commit
        for (var idx in this.layout_manager._active_styles) {
            this.layout_manager._active_styles[idx].update_data()
        }

        // TODO: translate and compute node is overkill for a simple drag procedure
        this.layout_manager.translate_layout()
        this.layout_manager.compute_node_positions()
github microsoft / powerbi-visuals-pulsechart / src / webBehavior.ts View on Github external
selection.call(pulseChartUtils.AddOnTouchClick, function (d: SelectableDataPoint) {
            selectionHandler.handleSelection(d, (d3.event as KeyboardEvent).ctrlKey);
        });
github chaibio / chaipcr / ng2 / src / app / shared / directives / charts / base-chart / base-chart.directive.ts View on Github external
protected zoomed() {

    if(!d3.event) return
    if(!d3.event.sourceEvent)
      d3.event.sourceEvent = {};

    if(d3.event.sourceEvent.srcElement === this.xAxisLeftExtremeValue.input.node())
      this.onClickLeftXAxisInput()
    if(d3.event.sourceEvent.srcElement === this.xAxisRightExtremeValue.input.node())
      this.onClickRightXAxisInput()
    if(d3.event.sourceEvent.srcElement === this.yAxisUpperExtremeValue.input.node())
      this.onClickUpperYAxisInput()
    if(d3.event.sourceEvent.srcElement === this.yAxisLowerExtremeValue.input.node())
      this.onClickLowerYAxisInput()

    let transform: any;
    transform = d3.event.transform
    transform.x = transform.x || 0
    transform.y = transform.y || 0
    transform.k = transform.k || 0
github microsoft / tsiclient / src / UXClient / Components / HierarchyNavigation / HierarchyNavigation.ts View on Github external
.on('click keydown', function() {
                            if (Utils.isKeyDownAndNotEnter(d3.event)) {return; }
                            self.path = data[el].path;
                            let pathListElem = d3.select('.tsi-path-list');
                            pathListElem.html('');
                            let pathToLoop = self.selectedHierarchyName !== HierarchySelectionValues.All ? data[el].path.slice(1) : data[el].path;
                            pathToLoop.forEach((a, i) => {
                                if (i > 0) {
                                    pathListElem.append('span').text(' / ');
                                }
                                let pathName = a ? a : '(' + this.getString("Empty") + ')';
                                pathListElem.append('span').classed('tsi-path', true)
                                    .text(pathName)
                                    .attr('title', pathName)
                                    .attr('tabindex', 0)
                                    .attr('arialabel', pathName)
                                    .on('click keydown', function () {
                                        if (Utils.isKeyDownAndNotEnter(d3.event)) {return; }
github babsey / nest-desktop / src / lib / sim-chart.js View on Github external
simChart.drag = function() {
    $('#autoscale').prop('checked', false)
    var xlim0 = app.simChart.xScale.domain();
    var xx = xlim0[1] - xlim0[0];
    var xs = app.simChart.xScale.range();
    var dx = d3.event.dx * xx / (xs[1] - xs[0]);
    app.simChart.xScale.domain([xlim0[0] - dx, xlim0[1] - dx])
    app.simChart.update()
}
github viz-centric / flair-visualizations / js / charts / sankey.js View on Github external
.on('drag', function (d) {
            d3.select(this).attr('transform', 'translate(' + d.x + ', ' + (d.y = Math.max(0, Math.min(parentHeight - d.dy, d3.event.y))
            ) + ')');
            sankey.relayout();
            link.attr('d', path);
        })
github plotly / plotly.js / src / traces / table / plot.js View on Github external
.origin(function(d) {
                d3.event.stopPropagation();
                d.scrollbarState.scrollbarScrollInProgress = true;
                return d;
            })
            .on('drag', makeDragRow(gd, tableControlView))
github wandb / client / wandb / board / ui / src / components / PanelParallelCoord.js View on Github external
function brush() {
    for (let i = 0; i < dimensions.length; ++i) {
      if (d3.event.target == y[dimensions[i]].brush) {
        if (d3.event.selection) {
          extents[i] = d3.event.selection.map(
            y[dimensions[i]].invert,
            y[dimensions[i]]
          );
        }
      }
    }

    foreground.style(
      'display',
      d =>
        dimensions.every((p, i) => {
          if (extents[i][0] == 0 && extents[i][0] == 0) {
            return true;
          }
          return extents[i][1] <= d[p] && d[p] <= extents[i][0];
        })
github plotly / plotly.js / src / lib / svg_text_utils.js View on Github external
.on('keyup', function() {
                if(d3.event.which === 27) {
                    gd._editing = false;
                    that.style({opacity: 1});
                    d3.select(this)
                        .style({opacity: 0})
                        .on('blur', function() { return false; })
                        .transition().remove();
                    dispatch.cancel.call(that, this.textContent);
                }
                else {
                    dispatch.input.call(that, this.textContent);
                    d3.select(this).call(alignHTMLWith(that, container, options));
                }
            })
            .on('keydown', function() {