本人的个人博客为: 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
原文:http://blog.csdn.net/lzhlzz/article/details/37654731