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

Question

我正在尝试selection.on()在 D3 v6 中获取节点的绑定数据。在我的事件侦听器中，我获取的是鼠标事件数据而不是数据。我如何获取数据？

这是我的代码

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

const nodes = data.nodes.map(d => Object.create(d));

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

  node.on("mouseover",d=>{
      console.log(d); //output = MouseEvent
      console.log(d.id); //output = undefined
  });

Answer 1

D3v5 及更早版本

在 d3v5 及更早版本中，我们可以使用以下模式：

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

哪里d是触发事件的元素的数据，i是它的索引，以及nodes当前的元素组。可以在事件侦听器中使用 访问事件信息d3.event。

D3v6

在 d3v6 中，模式已更改：

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

现在事件作为第一个参数直接传递给监听器，数据现在是传递给监听器的第二个参数。由于此更改的一部分d3.event已被删除。

如文档中所述：

D3 现在将事件直接传递给侦听器，替换 d3.event 全局并将 D3 与 vanilla JavaScript 和大多数其他框架内联。（来源）

此更改适用于brush.on，transition.on和drag.on，zoom.on以及selection.on。

这个

您仍然d3.select(this)可以像在 d3v6 之前一样在事件侦听器函数中使用。但是，如果使用箭头函数，this则会有不同的作用域。在 d3v5 及更早版本中，您可以使用：

(d,i,nodes) => d3.select(nodes[i])...

在 d3v6+ 中，您可以使用（用于selection.on()）：

(event,d) => d3.select(event.currentTarget)...

定位

要获取触发事件的 x,y 位置，您将在其中使用d3.mouse(this)，您现在可以使用：

d3.pointer(event);

在 d3v5 中您会使用d3.event.x和d3.event.y的地方，您现在将使用：

event.x, event.y

例子

下面是将事件和数据传递给 D3v6 中的侦听器函数的简单示例。该代码段使用 d3.pointer() 来获取相对于 SVG 的点击的 x,y 属性。单击矩形以获取矩形的基准以及记录到控制台的事件的 x 和 y 属性：

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

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

怎么样i和nodes？

索引和节点组不再传递给事件侦听器函数。但是，迁移指南确实提供了如何在此处查找当前节点组和索引的示例。