做网站去哪里做/外链查询
d3事件(二):事件的触发与自定义事件
蚁方阵
在第4版中，d3新增了事件的触发函数dispatch，类似于jquery的trigger函数，用于触发dom元素的事件处理函数。
并且，d3的选择集合还可以注册任意名称的事件与相关的事件处理函数，即自定义事件。
假定页面中还存在文章”d3事件(一):事件的注册与命名空间”的相关元素，基于此我们进行如下操作。
d3.selectAll('button')// d代表绑定的数据，i代表元素在集合中的位置，group代表相关的元素集合.on('hello', function(d, i, group) {// 获取事件对象var event = d3.event,output = 'Hello,' + d.username;// 从event里取出携带的数据if(event.detail && event.detail.suffix) {output += event.detail.suffix }// 进行名称的处理alert(output);})因为hello不是html标准的事件类型，现在点击将无法触发绑定的事件函数，这时则需要使用dispatch进行触发。
// 触发hello事件函数
d3.selectAll('button').dispatch('hello', {// 携带的数据会自动装入到d3.event对象中detail : {suffix : '!'}});
// 将会输出"Hello,yiifaa!"字样
dispatch能非常快捷地激发函数，并且能保留当前元素的上下文，如果需要更个性化、更强大的触发函数，则需要使用customEvent。看customEvent这个名称感觉像是定义个性化事件，然而它却是用于事件的触发，可以控制上下文、传递的数据以及对d3事件的包装。
d3.customEvent(// 替换d3.event，如果在html的标准事件里出发，如点击事件，还会将d3.event作为此对象的sourceEvent插入{detail : {prefix : '你好,'}}, // 替换处理函数function(params) {var ev = d3.event;// 还可以获取ev.sourceEvent，它指向之前发生的UI事件alert(ev.detail.prefix + this.datum().username +params.suffix);}, // 替换处理函数的下上文，即处理函数的thisd3.selectAll('button'), // 处理函数的参数列表[{suffix : '!'}]
);// 现在输出的结果为"你好，yiifaa!"
————————————————
版权声明：本文为CSDN博主「蚁方阵」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yiifaa/article/details/52133516