Dispatching Events with d3.dispatch

Syntax#

• d3.dispatch - create a custom event dispatcher.
• dispatch.on - register or unregister an event listener.
• dispatch.copy - create a copy of a dispatcher.
• dispatch.call - dispatch an event to registered listeners.
• dispatch.apply - dispatch an event to registered listeners.

Remarks#

Dispatching is a convenient mechanism for separating concerns with loosely-coupled code: register named callbacks and then call them with arbitrary arguments. A variety of D3 components, such as d3-request, use this mechanism to emit events to listeners. Think of this like Node’s EventEmitter, except every listener has a well-defined name so it’s easy to remove or replace them.

Related Readings

• Dispatching Events by Mike Bostock
• d3.dispatch Documentation
• Dispatch Event in NPM

simple usage

var dispatch = d3.dispatch("statechange");

dispatch.on('statechange', function(e){ console.log(e) })

setTimeout(function(){dispatch.statechange('Hello, world!')}, 3000)