【 D3.js 入门系列 --- 8 】 对话操作(事件)
来源:互联网 发布:300天last单词社交网络 编辑:程序博客网 时间:2024/05/22 03:36
本人的个人博客为: www.ourd3js.com
csdn博客为: blog.csdn.net/lzhlzz
转载请注明出处,谢谢。
这一节介绍如何进行对话的操作,如鼠标单击,鼠标滑过等。
对一个被选择的元素,添加对话操作,代码如下:
.on("click", function(){} )函数可以是无名函数,也可以是自己定义的函数。上面代码监听的是鼠标单击的事件,但鼠标在被选择对象上单击时,就会调用函数 function 。
常用的事件(event)有:
- click : 鼠标单击某元素时,相当于 mousedown 和 mouseup 组合在一起
- mouseover : 鼠标移到某元素上
- mouseout : 鼠标从某元素移开
- mousemove : 鼠标被移动
- mousedown : 鼠标按钮被按下
- mouseup : 鼠标按钮被松开
- dblclick : 鼠标双击
下面使用在5.1节中做的例子,为其中的柱形图添加对话操作。添加一部分代码即可:
svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d,i){return 30 + xScale(i); } ) .attr("y",function(d,i){return 50 + 500 - yScale(d) ; }) .attr("width", function(d,i){return xScale.rangeBand(); }) .attr("height",yScale) .attr("fill","red") .on("click",function(d,i){d3.select(this) .attr("fill","green"); }) .on("mouseover",function(d,i){d3.select(this) .attr("fill","yellow"); }) .on("mouseout",function(d,i){d3.select(this) .transition() .duration(500) .attr("fill","red"); });上面的代码添加了鼠标点击( click ),鼠标移入( mouseover ),鼠标移出( mouseout )三个操作。
上面的操作的函数中都调用了 d3.select(this) , 这是表示选择当前的元素,this 是当前的元素,因为在事件中通常要改变被点击的元素等,所以常有这段代码,要记住。
另外,为了使得鼠标移出元素时产生渐变效果,使用了 transition 和 duration ,详细请看第6节。
效果图如下:
用鼠标实际试试看吧,结果可见: http://www.ourd3js.com/demo/event.html ,完整的代码可在浏览器中右键选择栏中查看。
3 0
- 【 D3.js 入门系列 --- 8 】 对话操作(事件)
- 【 D3.js 入门系列 --- 4 】 如何使用scale(比例)
- 【 D3.js 视频系列 】 飞速入门
- 【 D3.js 入门系列 — 5 】 坐标轴
- 【 D3.js 视频系列 】 飞速入门
- 【 D3.js 入门系列 — 11 】 入门总结
- 【 D3.js 入门系列 --- 0 】 简介和安装
- 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
- 【 D3.js 入门系列 --- 5 】 如何添加坐标轴
- 【 D3.js 入门系列 --- 6 】 如何让图表动起来
- 【 D3.js 入门系列 --- 9 】 常见可视化图形
- 【 D3.js 入门系列 --- 9.1 】 饼状图的制作
- 【 D3.js 入门系列 --- 9.2 】 力学图的制作
- 【 D3.js 入门系列 --- 9.3 】 弦图的制作
- 【 D3.js 入门系列 --- 9.4 】 集群图的制作
- 【 D3.js 入门系列 --- 9.5 】 树状图的制作
- 【 D3.js 入门系列 --- 9.6 】 打包图的制作
- GCD模板
- Training--使用Fragment创建动态UI(1)-- 创建一个Fragment
- wps excel每3列设置一列颜色
- 对SPI、IIC、IIS、UART、CAN、SDIO、GPIO的解释
- HDU1222
- 【 D3.js 入门系列 --- 8 】 对话操作(事件)
- 配置Log4j(很详细)
- JS缓动效果
- 该是将受感染计算机隔离的时候了
- Android HOME键那些事
- 设计模式第二讲:工厂方法
- VS2010/MFC入门编程六(非模态对话框的现实与隐藏以及删除)
- Android Market 链接的生成与分享 评价功能
- Servlet监听统计网站历史访问人数