d3中为每个rect元素绑定带数据的点击事件

最新推荐文章于 2024-07-17 14:46:11 发布

justforuse

最新推荐文章于 2024-07-17 14:46:11 发布

阅读量9.4k

点赞数

分类专栏： d3js 文章标签： d3 rect 事件元素

本文链接：https://blog.csdn.net/u014291497/article/details/52235655

版权

这篇博客介绍了如何在 D3.js 中为每个 rect 元素设置数据绑定的点击事件，以便在点击时返回柱状图的数值。通过将值绑定到 rect 元素的 `value` 属性，并使用 D3 的数据绑定方法，实现了点击触发显示数值的效果。同时，还涉及到鼠标悬浮时的提示框显示，包括 mouseenter, mousemove 和 mouseout 事件的处理。" 106385297,7548071,如何在个人网站中集成Markdown：步骤与教程,"['前端开发', 'javascript', 'markdown']

摘要由CSDN通过智能技术生成

要实现的效果是点击每个柱的时候都要返回他的数值，而这个数值我选择将其绑定在value属性上（其实属性名可以自定义，但是不要使用abc这种没有意义的属性）

然后正常使用d3中的时间绑定方法绑定rect元素。

代码：

svg.selectAll(".bar")
    .data(dataset)
    .enter()
    .append("rect")
    //do something other...
    .attr("value", function(d) {
   
        return d.value;
    })
//为每个rect元素绑定click事件
svg.selectAll("rect")
    .on("click", getData)

function getData