d3.jd——监听鼠标事件

AryaoO

于 2016-04-25 13:45:21 发布

阅读量1.6w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端开发——D3 前端开发基础文章标签：监听事件鼠标 d3 动画 .on

本文链接：https://blog.youkuaiyun.com/Selina_Chan/article/details/51241710

前端开发基础同时被 2 个专栏收录

46 篇文章

订阅专栏

前端开发——D3

33 篇文章

订阅专栏

本文介绍了使用D3.js为SVG元素添加不同鼠标事件监听的方法，包括点击、悬停及移出事件，并通过实例展示了如何改变元素填充颜色来响应这些事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

.on("click", function(){  
  
} )

常用的事件（event）有：

click ：鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起
mouseover ：鼠标移到某元素上
mouseout ：鼠标从某元素移开
mousemove ：鼠标被移动
mousedown : 鼠标按钮被按下
mouseup : 鼠标按钮被松开
dblclick ：鼠标双击

下面是一个代码小例子：

//监听鼠标事件
var rect = bar.selectAll("rect")
    .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");
    });