d3.js:数据可视化利器之 交互行为:响应DOM事件
selection.on:事件监听操作符
on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数:
- 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提供了更好用的方法:
- d3.mouse(container)
参数container表示一个HTML元素,d3.mouse()将返回鼠标位置相对于 这个容器元素的x、y坐标。
这意味着对同一个鼠标事件,我们只要传入不同的容器元素,就可以获得鼠标位置 不同的相对位置!
解脱了很多令人烦躁的计算过程,对吧?
参考资料:http://***/course/54fd40cfe564e50d50dcf284/
d3.js:数据可视化利器之 交互行为:响应DOM事件的更多相关文章
- d3.js:数据可视化利器之快速入门
hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,3 ...
- d3.js:数据可视化利器之 修改文档:DOM操作符
style: CSS样式操作符 style()操作符用来设置或获取选择集中各DOM元素的CSS样式: selection.style(name[,value[,priority]]) style()操 ...
- [资料搜集狂]D3.js数据可视化开发库
偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...
- d3.js:数据可视化利器之 selection:选择集
选择集/selection 选择集/selection是d3中的核心对象,用来封装一组从当前HTML文档中选中的元素: d3提供了两个方法用来创建selection对象: select(selecto ...
- 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定
本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和 ...
- 【python可视化系列】python数据可视化利器--pyecharts
学可视化就跟学弹吉他一样,刚开始你会觉得自己弹出来的是噪音,也就有了在使用python可视化的时候,总说,我擦,为啥别人画的图那么溜: [python可视化系列]python数据可视化利器--pyec ...
- MOOC课程信息D3.js动态可视化
版权声明:本文为博主原创文章,转载 请注明出处:https://blog.csdn.net/sc2079/article/details/83153693 - 写在前面 好久没更新博客了,主要还是最近 ...
- 数据可视化利器pyechart和matplotlib比较
python中用作数据可视化的工具有多种,其中matplotlib最为基础.故在工具选择上,图形美观之外,操作方便即上乘. 本文着重说明常见图表用基础版matplotlib和改良版pyecharts作 ...
- Python数据可视化利器Matplotlib,绘图入门篇,Pyplot介绍
Pyplot matplotlib.pyplot是一个命令型函数集合,它可以让我们像使用MATLAB一样使用matplotlib.pyplot中的每一个函数都会对画布图像作出相应的改变,如创建画布.在 ...
随机推荐
- Unity3D学习(十一):关于UI销毁后图集仍然无法释放问题的解决办法
前言 最近进行项目性能优化的时候发现的问题. 问题 从大厅进到单局的过程中,会经过选择英雄和加载两个流程,这两个流程对应的UI界面都会有一张几mb左右的贴图作为背景,在进入单局游戏后这两个UI已经销毁 ...
- cocos2dx3.2升级Android5的坑
虽然已经转到服务端,但是对客户端的事情,偶尔还看看.公司的游戏用的是cocos2dx 3.2的版本, 然而在Android 5 上却无法运行. 先是没有触摸事件. 在stackoverflow上看到, ...
- java Web监听器导图详解
监听器是JAVA Web开发中很重要的内容,其中涉及到的知识,可以参考下面导图: Web监听器 1 什么是web监听器? web监听器是一种Servlet中的特殊的类,它们能帮助开发者监听web中的特 ...
- KMP + 求最小循环节 --- POJ 2406 Power Strings
Power Strings Problem's Link: http://poj.org/problem?id=2406 Mean: 给你一个字符串,让你求这个字符串最多能够被表示成最小循环节重复多少 ...
- 第二百六十节,Tornado框架-内置模板方法
Tornado框架-内置模板方法 直接在html文件使用,不需要传值 Tornado默认提供的这些功能其实本质上就是 UIMethod 和 UIModule,也就是Tornado框架定义好的html文 ...
- selenium 获取按钮的笔记
测试odoo时,发现大部分按钮都是动态生成,id也是动态的, 只能用xpath,但是配置一旦改变导致按钮位置改变 想到一个办法,遍历所有按钮,然后内容相符的才点击,测试代码如下 submit_loc ...
- ActionContextCleanUp
ActionContextCleanUp作用 延长action中属性的生命周期,包括自定义属性,以便在jsp页面中进行访问,让actionContextcleanup过滤器来清除属性,不让acti ...
- Linux Shell Vim 经常使用命令、使用技巧总结
前言 本文总结了自己实际开发中的经常使用命令,不定时更新,方便自己和其它人查阅. 如有其它提高效率的使用技巧.欢迎留言. 本文地址 http://blog.csdn.net/never_cxb/art ...
- android4.4上全屏界面实现禁止状态栏下拉
附上我改动的方法:PhoneWindowManager.java里面的改动 --- a/frameworks/base/policy/src/com/android/internal/policy/i ...
- iOS开发之--FMDB的使用
在很多时候,我们会用到数据库,我们移动端使用的数据库,一般都是嵌入型数据库,是一种较轻型的数据库, 一般很多时候,大牛封装的FMDB的第三方,已经足够满足我们的需求了! 现在分享一下自己的学习心得,希 ...