d3.js:数据可视化利器之 交互行为：响应DOM事件

selection.on：事件监听操作符

on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数：

1. selection.on(type[,listener[,capture]])

参数type是一个DOM事件类型字符串，指明要监听的事件，如： "click"、 "mouseover"、 "submit"等，可以使用浏览器支持的任何事件类型。

参数capture是可选的，对应于W3C的useCapture标志。

获取/移除当前监听函数

参数listener是可选的，如果未指定该参数，则on()调用返回 type类型的当前监听函数。

要移除一个事件监听，将listener参数置为null即可。

为事件注册监听函数

参数listener是一个监听函数，当d3捕捉到DOM事件后，将调用该监听函数， 并忽略该函数的返回值。监听函数也是一个访问器，d3触发监听函数时， 将this指向当前的DOM对象，并以参数形式传入其对应的数据和在选择集中的序号。

注册多个监听函数

如果在同一个DOM对象上已经注册有type类型的监听函数，那么再次调用on() 进行注册将移除之前注册的监听函数。如果需要对一种事件注册多个监听函数，可以在 事件类型名称后增加一个可选的命名空间，比如："click.foo"、"click.bar"。

d3.event：DOM事件对象

你可能已经注意到，d3的事件监听函数在触发时，传入的参数中没有DOM事件对象。 这样设计的出发点是让监听函数可以和其他访问器函数一样，能够获得DOM对象对应 的数据和序号。

但是，在很多应用场景下，我们还是需要DOM事件对象，比如：

• 当鼠标点击时，我们需要它的xy坐标，或者判断用户点击的是左键还是右键；
• 或者，当用户敲击键盘时，我们需要
• 或者，我们需要调用DOM事件对象的preventDefault()来禁止浏览器对某个事件的默认行为；
• 或者，我们需要调用stopPropagation()来阻止事件的冒泡行为......

d3使用一个全局变量来提供DOM事件对象：d3.event。

d3.event仅在监听函数中有效。每当事件触发时，d3就将DOM事件对象赋给d3.event， 并在监听器处理完之后将其清理。

d3.event就是你熟悉的Event对象，所以，随便用。

d3.mouse：获得鼠标事件位置

尽管可以使用DOM事件对象的pageX和pageY获得鼠标位置，d3提供了更好用的方法：

1. d3.mouse(container)

参数container表示一个HTML元素，d3.mouse()将返回鼠标位置相对于 这个容器元素的x、y坐标。

这意味着对同一个鼠标事件，我们只要传入不同的容器元素，就可以获得鼠标位置 不同的相对位置！

解脱了很多令人烦躁的计算过程，对吧？

参考资料：http://***/course/54fd40cfe564e50d50dcf284/

转载于:https://www.cnblogs.com/hubwiz/p/4361896.html