d3可视化实战04：事件绑定机制

首先说明，d3支持所有的JS事件——甚至其他代码的自定义事件。这里有一个列表，The MDN Event Reference， 包含了几乎所有浏览器创建的事件类型。大家有需要可以去查看。

D3的事件绑定的语法，与jquery等其他类库用起来区别不大，都是object.on( event, listener )的形式。但是在具体实践中，我们经常会遇到给同一个对象绑定多个事件监听器的问题。这里就原生js、jquery和d3分别进行讨论。

一.原生JS的事件绑定

在探讨这个问题之前，我们首先需要看一下原生js事件绑定机制的实现方法。原生js典型方法就是使用onclick属性来进行事件绑定。但当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。所以下面这个例子，可以想到最后的结果只能弹出一个alert对话框。

 

1 2 3 4 5 6 7 8 9 10 11 12

<span style="font-size:18px;">window.onload = function(){       var btn = document.getElementById("yuanEvent");       btn.onclick = function(){           alert("第一个事件");       }       btn.onclick = function(){           alert("第二个事件");       }       btn.onclick = function(){           alert("第三个事件");       }   }</span>

在原生JS中，对词问题的解决方法是使用事件监听器对象来处理事件响应。下面这段代码展示了事件监听器的用法，这下可以弹出两个对话框了。

 

1 2 3 4 5 6 7 8 9 10 11 12

var eventOne = function(){       alert("第一个监听事件");   }   function eventTwo(){       alert("第二个监听事件");   }   window.onload = function(){       var btn = document.getElementById("yuanEvent");       //addEventListener：绑定函数       btn.addEventListener("click",eventOne);       btn.addEventListener("click",eventTwo);   }

当然，能绑定就能解除绑定，方法如下：

 

1 2	btn.addEventListener("click",eventTwo);   btn.removeEventListener("click",eventOne);

————————————————————————————————–

二.d3的事件绑定机制

同样的，在使用d3进行事件绑定的时候，也会遇到类似的问题。如果直接进行绑定，那么后果是一样的，后面的方法会覆盖掉前面的方法。例如在下面的例子中，只有第二个函数Listenerbt会执行。

 

1 2 3

d3.select("#timebasis")     .on("change", listenersp)     .on("change", listenerbt);

我们想启用监听器。但是d3 API里面并没有这个东东。难道要我用原生JS写？虽然不是不可以，但事实上是，d3js对此有更好的解决方式，那就是使用命名空间，对事件响应进行区分！

see: https://github.com/mbostock/d3/wiki/Selections#wiki-on

If an event listener was already registered for the same type on the selected element, the existing listener is removed before the new listener is added. To register multiple listeners for the same event type, the type may be followed by an optional namespace, such as “click.foo” and “click.bar”. To remove a listener, pass null as the listener.

下面这个例子，就是使用了命名空间来处理多个事件绑定到同一对象这一问题。运行结果是，两个函数listenersp，listenerbt都会被执行。

 

1 2 3

d3.select("#timebasis")     .on("change.sp", listenersp)     .on("change.bt", listenerbt);

能绑定当然也能解除绑定，方法如下：

 

1 2 3

d3.select("#timebasis")     .on("change.sp", null)     .on("change.bt", null);

事实上，在d3两个自建的交互方法drag和zoom中，都使用了复数的事件绑定机制。例如在d3的ZOOM方法中，实际绑定了7个事件：mousedown, mousemove, dbclick, touchstart, wheel, mousewheel, MOzMousePixelScroll. 为了避免这些事件与用户自己的事件产生覆盖冲突，他们都使用了zoom这一命名空间。这个例子值得我们学习。

see: https://github.com/mbostock/d3/wiki/Zoom-Behavior

有时候zoom的功能太丰富了也很头痛，会跟你的需求产生冲突。这个时候就需要解除绑定一些事件。解绑只需要置空就行：

 

1 2 3 4 5 6 7

svg.on("mousedown.zoom", null);                     svg.on("mousemove.zoom", null);                 svg.on("dblclick.zoom", null);                 svg.on("touchstart.zoom", null);                 svg.on("wheel.zoom", null);                 svg.on("mousewheel.zoom", null);                 svg.on("MozMousePixelScroll.zoom", null);

特别提一点：jquery中也是使用命名空间对不同绑定事件进行区分的。但是它是隐式地使用命名空间，用户不需要特别声明。例如下面的例程，两个console都会出现。

 

1 2	$(".logo").mouseenter(function(){console.log("paomian")}); $(".logo").mouseenter(function(){console.log("niuroumian")});

这虽然很方便，但许多从jquery入门的程序员若不了解这一点，会导致在其他类库中会出现错误。

————————————————————————————————–

三.d3的自定义事件

大多数时候，我们只要利用这些已有事件就可以了。但是正如别的类库会自定义事件用以处理一些定制问题一样，d3也可以创建自定义事件。这里就要用到d3.dispatch对象。

see: https://github.com/mbostock/d3/wiki/Internals#rebind

使用起来也很简单，首先声明一个命名空间，例如：

 

1	var dispatch = d3.dispatch('nodeClick', 'evaluationDialog', 'infoboxDblclick');

然后就可以分别定义具体的处理函数和调用方式：

 

1	dispatch.on("nodeClick", listener);

别的事件也可以触发自定义事件：

 

1	.on('click.dispatch', dispatch.nodeClick);

当然，这个dispatch的具体用法，情况要比之前讨论的内容复杂得多。具体我们还是要看例程才能理解其作用。

一个例子是：http://bl.ocks.org/mbostock/5872848，这是一个自定义事件的典型用法，通过自定义事件和命名空间将又一个交互造成的多个响应事件统一起来，从而得到一致的处理逻辑。

第二个例子是：https://github.com/kristw/angularjs-requirejs-d3-seed。它使用自定义事件来定义d3 vis模块与外层angularjs框架之间的交互，取得了很好的效果。

PS：最后这里必须要吐槽一下d3的API文档，虽然介绍很详细，但是缺少代码示例，这点就不如jquery API和angularjs API。本来很简单的东西让人看不懂，还得我去stackoverflow上查。代码这个东西很多时候不是光用语言能描述清楚的。