首页 > Web开发 > 详细

【 D3.js 入门系列 --- 8 】 对话操作(事件)

时间:2014-07-10 21:55:49      阅读:411      评论:0      收藏:0      [点我收藏+]

    本人的个人博客为: www.ourd3js.com 

    csdn博客为: blog.csdn.net/lzhlzz 

    转载请注明出处,谢谢。


    这一节介绍如何进行对话的操作,如鼠标单击,鼠标滑过等。

    对一个被选择的元素,添加对话操作,代码如下:

.on("click", function(){

} )
    函数可以是无名函数,也可以是自己定义的函数。上面代码监听的是鼠标单击的事件,但鼠标在被选择对象上单击时,就会调用函数 function 。

    常用的事件(event)有:

  • click  : 点击某元素时
  • 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节。
    效果图如下:
bubuko.com,布布扣

    用鼠标实际试试看吧,结果可见:  http://www.ourd3js.com/demo/event.html   ,完整的代码可在浏览器中右键选择栏中查看。


【 D3.js 入门系列 --- 8 】 对话操作(事件),布布扣,bubuko.com

【 D3.js 入门系列 --- 8 】 对话操作(事件)

原文:http://blog.csdn.net/lzhlzz/article/details/37654731

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!