How to use the d3-dispatch.dispatch function in d3-dispatch

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;

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() {

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) {

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;

export function uiConflicts(context) {
    var dispatch = d3_dispatch('cancel', 'save');
    var keybinding = d3_keybinding('conflicts');
    var _origChanges;
    var _conflictList;


    function keybindingOn() {
        d3_select(document)
            .call(keybinding.on('⎋', cancel, true));
    }

    function keybindingOff() {
        d3_select(document)
            .call(keybinding.off);
    }

    function tryAgain() {

export function uiIntroArea(context, reveal) {
    var dispatch = d3_dispatch('done');
    var playground = [-85.63552, 41.94159];
    var playgroundPreset = context.presets().item('leisure/playground');
    var descriptionField = context.presets().field('description');
    var timeouts = [];
    var _areaID;


    var chapter = {
        title: 'intro.areas.title'
    };


    function timeout(f, t) {
        timeouts.push(window.setTimeout(f, t));
    }

function annotation() {
  var annotations = [],
      collection = void 0,
      context = void 0,
      //TODO: add canvas functionality
  disable = [],
      accessors = {},
      accessorsInverse = {},
      editMode = false,
      ids = void 0,
      type = d3Callout,
      textWrap = void 0,
      notePadding = void 0,
      annotationDispatcher = dispatch("subjectover", "subjectout", "subjectclick", "connectorover", "connectorout", "connectorclick", "noteover", "noteout", "noteclick", "dragend", "dragstart"),
      sel = void 0;

  var annotation = function annotation(selection) {
    sel = selection;
    //TODO: check to see if this is still needed
    if (!editMode) {
      selection.selectAll("circle.handle").remove();
    }

    var translatedAnnotations = annotations.map(function (a) {
      if (!a.type) {
        a.type = type;
      }
      if (!a.disable) {
        a.disable = disable;
      }

function property (key, value) {
        var lazy,
            prop = {
                get: function () {
                    return value;
                }
            };

        properties.set(key, dispatch('change'));

        function update (newValue) {
            var oldValue = value;
            value = newValue;
            properties.get(key).call('change', model, value, oldValue);
            properties.get('').call('change', model);
        }

        if (isFunction(value)) value = {get: value};

        if (isObject(value) && isFunction(value.get)) {
            lazy = value;
            value = lazy.get.call(model);
            on(`.${key}`, () => {
                var newValue = lazy.get.call(model);
                if (newValue === value) return;