如何在 D3 v6 中通过鼠标悬停来访问节点数据？

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

问题：

在 D3 中v6，当使用selection.on()为节点添加mouseover事件监听器时，返回的是事件数据而不是节点的数据。如何获取数据？

答案：

D3v5 及更早版本：

在 D3 v5 及更早版本中，以下模式用于定义事件侦听器：

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

其中 d 是触发事件的元素的数据，i 是其索引，nodes 是当前元素组。可以使用 d3.event 访问事件信息。

D3v6:

在 D3 v6 中，事件监听器模式已更改为：

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

现在，事件作为第一个参数直接传递给监听器，而数据是第二个参数。 d3.event 已被移除。

使用 d3.select(this)

在事件监听函数中，仍然可以使用 d3.select(this) 来选择触发元素，即使在 D3 v6 中也是如此。但是，当使用箭头函数时，这将具有不同的范围。

定位：

获取事件的 x,y 位置，该位置之前使用d3.mouse(this)，您现在可以使用 d3.pointer(event)。要直接访问 x 和 y 属性，请使用 event.x 和 event.y 而不是 d3.event.x 和 d3.event.y。

示例：

以下示例展示了如何将事件和数据传递给 D3 v6 中的事件侦听器函数：

const svg = d3
  .select("body")
  .append("svg");

svg
  .selectAll("rect")
  .data([1, 2, 3])
  .enter()
  .append("rect")
  .attr("width", 30)
  .attr("height", 30)
  .attr("x", function (d) {
    return d * 50;
  })
  .on("click", function (event, d) {
    console.log(d);
    console.log(d3.pointer(event));
  });

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