【d3.js v4基础】事件调度(Dispatches)

d3.dispatch

d3.dispatch调度机制是一段用以分离关注点的低耦合的代码:注册回调函数而后传入任意的参数调用它们，来协调具备共享状态的视图,自定义事件容许组件的松散耦合：视图能够监听事件并相应地更新DOM，而无需将每一个视图明确地绑定在一块儿。当用户触发事件须要试图发生变化时，会调用dispatch已经绑定好事件，能够通知到全部事件监听器，并触发回调函数。

Api

建立事件调度器

var dispatch = d3.dispatch("start", "end");

注册事件监听器

dispatch.on("start", callback1);
dispatch.on("start.foo", callback2);
dispatch.on("end", callback3);

经过 dispatch.call 或者 [dispatch.apply] 来调用start事件的回调:

dispatch.call("start");
与function.call相似，你也能够指定this上下文和其余参数:
dispatch.call("start", {about: "I am a context object"}, "I am an argument");

实例

var dispatch = d3.dispatch("a", "b");
dispatch.on("a.o", function(data) {
  console.log(data);
});
dispatch.on("a", function(data) {
  console.log(data);
});
dispatch.on("b.o", function(data) {
  console.log(data);
});
dispatch.on("b",function(data){
  console.log('b',data)
})

dispatch.call("a", this, 'A data');
dispatch.call("b", this, 'B data');

输出：
A data
 A data
 B data
B data

若是调用

dispatch.call("b.o", this, 'B data');
输出： Uncaught Error: unknown type: b.o

即便在开始注册了

var dispatch = d3.dispatch("b.o");
dispatch.on("b.o", function(data) {
  console.log(data);
});
dispatch.call("b.o", this, 'B data');
无报错，但输出为空值

官方实例：https://bl.ocks.org/mbostock/...