标签：d3 event on click mouseover
本人的个人博客为： www.ourd3js.com
csdn博客为： blog.csdn.net/lzhlzz
转载请注明出处，谢谢。
这一节介绍如何进行对话的操作，如鼠标单击，鼠标滑过等。
对一个被选择的元素，添加对话操作，代码如下：
.on("click", function(){
} ) 函数可以是无名函数，也可以是自己定义的函数。上面代码监听的是鼠标单击的事件，但鼠标在被选择对象上单击时，就会调用函数 function 。
常用的事件（event）有：
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.js 入门系列 --- 8 】 对话操作（事件）,布布扣,bubuko.com
标签：d3 event on click mouseover
原文地址：http://blog.csdn.net/lzhlzz/article/details/37654731
