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上查。代码这个东西很多时候不是光用语言能描述清楚的。
d3可视化实战04:事件绑定机制的更多相关文章
- d3可视化实战03:神奇的superformula
需求驱动实现 前文讲过了D3的数据驱动机制,中间所举的例子都很简单.例如那个demo里面,绑定的数据是一个简单的数组,实现的图元也仅仅是一堆用SVG画的circle.但是现实世界中我们往往会遇到复杂的 ...
- 关于jQuery新的事件绑定机制on()的使用技巧
关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...
- jQuery新的事件绑定机制on()
浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理 ...
- JQuery的方便之处——宽高设置、坐标值和滚动条+事件绑定机制
1.元素的宽高 可以通过css来进行设置,例如:$("元素").css({"宽度":"值","高度":"值&q ...
- jQuery新的事件绑定机制on()示例应用
投稿:whsnow 字体:[增加 减小] 类型:转载 从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下 ...
- d3可视化实战00:d3的使用心得和学习资料汇总
最近以来,我使用d3进行我的可视化工具的开发已经3个月了,同时也兼用其他一些图表类库,自我感觉稍微有点心得.之前我也写过相关文章,我涉及的数据可视化的实现技术和工具,但是那篇文章对于项目开发而言太浅了 ...
- d3可视化实战02:理解d3数据驱动的真正含义
前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口 ...
- d3可视化实战01:理解SVG元素特性
一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用 ...
- 关于jQuery事件绑定
转自:http://www.cnblogs.com/gaojun/p/3497582.html html: <a href="#" onclick="addBtn( ...
随机推荐
- Hive学习笔记【转载】
本文转载自:http://blog.csdn.net/haojun186/article/details/7977565 1. HIVE结构 Hive 是建立在 Hadoop 上的数据仓库基础构架. ...
- H1B工作签证紧俏 “中签率”低对中国留学生影响大-中新网
H1B工作签证紧俏 "中签率"低对中国留学生影响大-中新网 H1B工作签证紧俏 "中签率"低对中国留学生影响大
- Magician - hdu 5316 (区间查询合并)
题意:有一个区间,然后有两种操作 1. 把a处的值改为b 0,查询区间ab的子序列的最大和,这个比较特殊,子序列里面相邻的数要有不同的奇偶性 ***************************** ...
- Java多线程编程(二)
在 Java多线程编程(一) 中的多线程并没有返回值,本文将介绍带返回值的多线程. 要想有返回值,则需要实现新的接口Callable而不再是Runnable接口,实现的方法也改为call()方法,执行 ...
- 【ArcGIS 10.2新特性】Geodatabase 10.2 常见问题
地理数据库技术一直以来都是ArcGIS的基础技术.为充分使用ArcGIS的全部功能则需要把数据存储在Geodatabase当中.Geodatabase是一个综合性的信息模型,它可以支持存储几乎任意类型 ...
- 【错误总结之(一)】error LNK2038: 检測到“_ITERATOR_DEBUG_LEVEL”的不匹配项: 值“0”不匹配值“2”
1>cvblob.lib(cvblob.obj) : error LNK2038: 检測到"_ITERATOR_DEBUG_LEVEL"的不匹配项: 值"0&quo ...
- Android学习四、Android中的Adapter
一.Adapter的介绍 An Adapter object acts as a bridge between an AdapterView and the underlying data for t ...
- codevs 1733 聪明的打字员 (Bfs)
/* Bfs+Hash 跑的有点慢 但是codevs上时间限制10s 也ok */ #include<iostream> #include<cstdio> #include&l ...
- ASP.NET-FineUI开发实践-9
用了FineUI有一段时间了,还是分享下我咋改的吧,没想的那么难,我也是从小白来的. 基础是要懂JQ和EXTJS,主要是要懂JQ和EXTJS能干啥,这里有两个网站 http://www.w3schoo ...
- oop实现方法与属性继承
<script> /*父类 Person*/ function Person(name,age){ this.name=name; this.age=age; } Person.proto ...