在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 是其索引，节点是当前组的元素。可以使用 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) { .... })

现在，该事件作为第一个参数直接传递给侦听器，数据现在为第二个参数传递给侦听器。要获取触发事件的x，y位置，最好使用：

Now the event is passed directly to the listener as the first parameter, the datum is now the 2nd parameter passed to the listener. To get the x,y position of the triggering event, you are likely best to use:

d3.pointer(event);

文档中所述：

D3现在将事件直接传递给侦听器，从而替换了d3.event全局变量，并使用原始JavaScript和大多数其他框架将D3内联。 （源）

此更改适用于 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.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 和个节点怎么样？

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屋！