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中文网其他相关文章！