Rebinding exports in d3.js v4

Question

I'm creating a map using the modules system. I'm more or less used to D3.js v3 but I am still getting used to v4.

I am trying to add a dispatch but I don't know how to rebind the exports in V4, as this function is not available now.

So for my dispatch (_dis) and my particular event ("changetype"), the rebind in d3 v3 would be right before returning the exports, for example:

d3.mapDots = function (districts){

   var _dis = d3.dispatch('changetype');

   (...)

   exports.color = function(_c){
       if(!arguments.length) return color;
       color = _c;
       return this;
   };    

   d3.rebind(exports,_dis,"on");
   return exports
   };

Does anyone know how to do this in v4? I've been trying dispatch.apply but it doesn't work.

Thanks!

Answer 1

Good question. Looks like the dispatch object has somewhat changed, and that d3.rebind no longer exists. Because the latter is gone, it appears that there's no way to "copy" (via d3.rebind) the .on() method. Instead you must implement your own. See here how bostock implemented d3-brush.

I put together this jsFiddle to demonstrate how to achieve with D3 v4 what you're asking.

The important bit is implementing the .on method:

instance.on = function() {
  var value = dispatcher.on.apply(dispatcher, arguments);
  return value === dispatcher ? instance : value;
}

And, dispatching is like this

dispatcher.call("was_clicked", this, "Hello, Foo!");