【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/...