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

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

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

转载请注明出处，谢谢。

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

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

.on("click", function(){

} )

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

经常使用的事件（event）有：

click ： 鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起
mouseover ： 鼠标移到某元素上
mouseout ： 鼠标从某元素移开
mousemove ： 鼠标被移动
mousedown : 鼠标button被按下
mouseup : 鼠标button被松开
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 。完整的代码可在浏览器中右键选择栏中查看。