首页 > web前端 > js教程 > D3 v6中如何在鼠标悬停事件期间抓取节点数据?

D3 v6中如何在鼠标悬停事件期间抓取节点数据?

Susan Sarandon
发布: 2024-10-24 07:46:01
原创
640 人浏览过

How to Grab Node Datum During Mouseover Events in D3 v6?

在 D3 v6 中,如何在鼠标悬停事件期间获取节点数据

在 D3 v6 及更高版本中,通过选择检索节点的绑定数据。 on() 与以前的版本不同。该数据不再接收鼠标事件数据,而是成为传递给事件监听器的第二个参数。

D3v5 和早期

之前,D3 中的事件监听器遵循以下模式:

selection.on("eventType", function(d, i, nodes) { .... })
登录后复制

其中:

  • d 是事件触发元素的数据
  • i 是其索引
  • nodes 是当前组所选元素的

可以使用 d3.event 访问事件相关的数据。

D3v6

使用 D3v6,模式已更改to:

selection.on("eventType", function(event, d) { .... })
登录后复制

现在直接将事件对象作为第一个参数传递,而数据作为第二个参数。因此 d3.event 已被弃用。

访问数据

要检索鼠标悬停目标的数据:

node.on("mouseover", (event, d) => { 
    console.log(d); 
});
登录后复制

确定事件位置

在 D3v5 中,您可以使用 d3.mouse(this) 来获取事件的 x,y 位置。在 D3v6 中,使用:

d3.pointer(event);
登录后复制

示例

以下示例演示在鼠标悬停事件期间获取数据和事件位置:

const data = [
    {
        "id": "Myriel",
        "group": 1
    }, 
    {
        "id": "Napoleon",
        "group": 1
    }
];

const nodes = svg.append("g")
    .selectAll("circle")
    .data(data)
    .join("circle")
    ...;

node.on("mouseover", (event, d) => {
    console.log(d.id); 
    console.log(d3.pointer(event));
});
登录后复制

以上是D3 v6中如何在鼠标悬停事件期间抓取节点数据?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板