d3.jd——监听鼠标事件

最新推荐文章于 2025-05-16 13:13:04 发布

原创最新推荐文章于 2025-05-16 13:13:04 发布 · 1.6w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#监听事件 #鼠标 #d3 #动画 #.on

前端开发基础同时被 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");
    });