在 D3 v6 中无法在鼠标悬停时获取节点数据 [英] Unable to get node datum on mouseover in D3 v6

问题描述

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

I am trying to get a nodes' bound datum with selection.on() in D3 v6. In my event listener I'm getting the mouse event data instead of the datum. How do I get the datum?

这是我的代码

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
  });

推荐答案

D3v5 及更早版本

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

In d3v5 and earlier we could use the pattern:

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

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

Where d is the datum of the element triggering the event, i is its index, and nodes the current group of elements. Event information could be accessed within the event listener with d3.event.

D3v6

在 d3v6 中，模式已更改:

In d3v6 the pattern has been changed:

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

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

Now the event is passed directly to the listener as the first parameter, the datum is now the 2nd parameter passed to the listener. As part of this change d3.event has been removed.

如文档中所述:

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

D3 now passes events directly to listeners, replacing the d3.event global and bringing D3 inline with vanilla JavaScript and most other frameworks. (source)

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

This change applies to brush.on, transition.on, and drag.on, zoom.on as well as selection.on.

这个

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

You can still use d3.select(this) in the event listener function as you did prior to d3v6. However, if using arrow functions, this will have a different scope. In d3v5 and earlier you could use:

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

在 d3v6+ 中你可以使用(对于 selection.on()):

In d3v6+ you can use (for selection.on()):

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

定位

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

To get the x,y position of the triggering event, where you would have used d3.mouse(this), you can now use:

d3.pointer(event);

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

Where you would have used d3.event.x and d3.event.y, in d3v5, you would now use:

event.x, event.y

示例

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

Below is a simple example of passing the event and the datum to the listener function in D3v6. The snippet uses d3.pointer() to get the x,y properties of the click relative to the SVG. Click on a rectangle to get the rectangle's datum and the x and y properties of the event logged to console:

var 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));
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.0.0/d3.min.js"></script>

i 和 nodes 怎么样?

What about i and nodes?

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

The index and the group of nodes are no longer passed to the event listener function. However, the migration guide does provide examples of how to find the current group of nodes and the index here.

这篇关于在 D3 v6 中无法在鼠标悬停时获取节点数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！