在D3 v6中，鼠标悬停时无法获取节点基准

如何解决在D3 v6中，鼠标悬停时无法获取节点基准

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

这是我的代码

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及更早版本中，我们可以使用以下模式：

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嵌入到原始JavaScript和大多数其他框架中。 （source）

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

此

您仍然可以像在d3v6之前一样在事件侦听器功能中使用d3.select(this)。但是，如果使用箭头功能，this将具有不同的范围。在d3v5及更早版本中，您可以使用：

(d,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属性记录到控制台：

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",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呢？

索引和节点组不再传递给事件侦听器功能。但是，迁移指南确实提供了有关如何查找当前节点组和索引here的示例。