如何在 D3 v6 中获取鼠标悬停时的节点数据

D3 v6 中鼠标悬停时无法获取节点数据

在 D3 v6 中，事件处理机制较之前版本发生了重大变化。本文深入研究了这些更改，并提供了在鼠标悬停事件期间尝试检索节点数据时遇到的常见问题的解决方案。

D3 v5 及更早版本中的事件处理

D3 v5 及更早版本中，事件处理模式遵循以下格式：

selection.on("eventType", function(d, i, nodes) { .... })

在监听器函数中，d 表示触发元素的数据，i 是其索引，nodes 是当前的元素组。此外，事件信息可以通过 d3.event 访问。

D3 v6 中的事件处理

在 D3 v6 中，事件处理模式已修改如下：

selection.on("eventType", function(event, d) { .... })

这里，事件作为第一个参数直接传递给监听器，数据成为第二个参数。因此，d3.event 已被删除。

获取节点数据

要在 D3 v6 中检索节点的数据，您可以使用新的事件处理模式。以下示例演示如何处理鼠标悬停事件并访问数据：

node.on("mouseover", function(event, d) {
  console.log(d.id); // Outputs the id of the node
});

定位和其他事件属性

要访问触发事件的 x、y 位置，请使用 d3。指针（事件）而不是 d3.mouse（this）。要获取 x 和 y 属性，请使用 event.x 和 event.y 而不是 d3.event.x 和 d3.event.y。

总结

事件处理中的关键变化D3 v6 涉及将事件作为第一个参数传递并使用 event.currentTarget 而不是 d3.select(this)。此外，出于定位目的，d3.pointer(event) 取代了 d3.mouse(this)。了解这些更改将使您能够有效地处理 D3 v6 应用程序中的事件。

以上是如何在 D3 v6 中获取鼠标悬停时的节点数据的详细内容。更多信息请关注PHP中文网其他相关文章！