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

浏览数：36 / 时间：2015年06月09日

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

转载请注明出处，谢谢。

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

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

.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节。

效果图如下：