How to use d3-dispatch - 10 common examples

factory: function(el, width, height) {

    var instance = {};

    instance.chart = {};

    var dispatch_ = dispatch("mouseover","mouseleave","click");
    instance.chart.on = dispatch_.on;

    // Take a 2-column CSV and transform it into a hierarchical structure suitable
    // for a partition layout. The first column is a sequence of step names, from
    // root to leaf, separated by hyphens. The second column is a count of how
    // often that sequence occurred.
    function buildHierarchy(csv) {
      var root = {"name": "root", "children": []};
      for (var i = 0; i < csv.length; i++) {
        var sequence = csv[i][0];
        var size = +csv[i][1];
        if (isNaN(size)) { // e.g. if this is a header row
          continue;
        }
        var parts = sequence.split("-");
        var currentNode = root;

history = function(_) {
    var proxy,
        dispatcher,
        events,
        url_handler;
    // bare object to act as an API proxy to the internal dispatcher
    proxy = Object.create(null);
    // create a dispatcher using the input as a list of event names
    events = Array.prototype.slice.call(arguments);
    dispatcher = dispatch.apply(this, events);
    // default url handler; note that the order of the arguments to d3.history
    // is inverted compared to the HTML5 history API in order to parallel
    // d3.dispatch
    url_handler = function(data, title, url) {
        if (window && window.history) {
            window.history.pushState(data, title, url);
        }
    };
    // get or set the url processing function, useful for tapping in to insert
    // custom functionality
    proxy.url = function(new_url_handler) {
        if (new_url_handler && typeof new_url_handler !== 'function') {
            console.error('optional argument to the .url() method of d3.history object must be a function');
        }
        if (typeof new_url_handler === 'function') {
            url_handler = new_url_handler;

export function uiSettingsCustomData(context) {
    var dispatch = d3_dispatch('change');

    function render(selection) {
        var dataLayer = context.layers().layer('data');

        // keep separate copies of original and current settings
        var _origSettings = {
            fileList: (dataLayer && dataLayer.fileList()) || null,
            url: context.storage('settings-custom-data-url')
        };
        var _currSettings = {
            fileList: (dataLayer && dataLayer.fileList()) || null,
            url: context.storage('settings-custom-data-url')
        };

        // var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
        var modal = uiConfirm(selection).okButton();

import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile';
import { geoExtent } from '../geo';

import {
    utilRebind,
    utilIdleWorker
} from '../util';

import {
    osmNote
} from '../osm';
import { actionRestrictTurn } from '../actions';

var urlroot = 'https://api.openstreetmap.org',
    _notesCache,
    dispatch = d3_dispatch('loadedNotes', 'loading'),
    tileZoom = 14;

// TODO: complete authentication
var oauth = osmAuth({
    url: urlroot,
    oauth_consumer_key: '',
    oauth_secret: '',
    loading: authLoading,
    done: authDone
});

function authLoading() {
    dispatch.call('authLoading');
}

function authDone() {

function Chartlet(enter, update, exit, customEvents) {
  update = update || NOOP;
  exit = exit || NOOP;
  customEvents = customEvents || [];
  const _propertyCache = {};
  const _dispatch = dispatch.apply(this, ['enterDone', 'updateDone', 'exitDone'].concat(customEvents));

  // getter and setter of chartlet properties

  function property(name, value) {
    // if functioning as a setter, set property in cache
    if (arguments.length > 1) {
      _propertyCache[name] = functor(value);
      return this;
    }

    // functioning as a getter, return property accessor
    return functor(_propertyCache[name]);
  }

  function getPropertyValue(name, d, i) {
    return property(name)(d, i);

const sideEffects = (config, ps, flags) =>
  dispatch.apply(this, Object.keys(config));
// .on('brush', data => {

export function uiFieldWikidata(field, context) {
    var wikidata = services.wikidata;
    var dispatch = d3_dispatch('change');
    var searchInput = d3_select(null);
    var _qid = null;
    var _wikidataEntity = null;
    var _wikiURL = '';
    var _entity;

    var _wikipediaKey = field.keys && field.keys.find(function(key) {
            return key.includes('wikipedia');
        }),
        _hintKey = field.key === 'wikidata' ? 'name' : field.key.split(':')[0];

    var combobox = uiCombobox(context, 'combo-' + field.safeid)
        .caseSensitive(true)
        .minItems(1);

    function wiki(selection) {

if (userConfig && userConfig.dimensionTitles) {
    console.warn('dimensionTitles passed in userConfig is deprecated. Add title to dimension object.');
    entries(userConfig.dimensionTitles).forEach(function (d) {
      if (config.dimensions[d.key]) {
        config.dimensions[d.key].title = config.dimensions[d.key].title ? config.dimensions[d.key].title : d.value;
      } else {
        config.dimensions[d.key] = {
          title: d.value
        };
      }
    });
  }

  var eventTypes = ['render', 'resize', 'highlight', 'mark', 'brush', 'brushend', 'brushstart', 'axesreorder'].concat(keys(config));

  var events = dispatch.apply(_this$4, eventTypes),
      flags = {
    brushable: false,
    reorderable: false,
    axes: false,
    interactive: false,
    debug: false
  },
      xscale = scalePoint(),
      dragging = {},
      axis = axisLeft().ticks(5),
      ctx = {},
      canvas = {};

  var brush = {
    modes: {
      None: {

export function behaviorHover(context) {
    var dispatch = d3_dispatch('hover');
    var _selection = d3_select(null);
    var _newId = null;
    var _buttonDown;
    var _altDisables;
    var _target;


    function keydown() {
        if (_altDisables && d3_event.keyCode === d3_keybinding.modifierCodes.alt) {
            _selection.selectAll('.hover')
                .classed('hover-suppressed', true)
                .classed('hover', false);

            _selection
                .classed('hover-disabled', true);

function brush(dim) {
  var extent = defaultExtent,
      filter = defaultFilter,
      listeners = dispatch(brush, "start", "brush", "end"),
      handleSize = 6,
      touchending

  function brush(group) {
    var overlay = group
        .property("__brush", initialize)
      .selectAll(".overlay")
      .data([type("overlay")]);

    overlay.enter().append("rect")
        .attr("class", "overlay")
        .attr("pointer-events", "all")
        .attr("cursor", cursors.overlay)
      .merge(overlay)
        .each(function() {
          var extent = local(this).extent;