为什么d3中鼠标悬停时字段未定义且d3.event也未定义？

问题原因 #

• d3.event未定义：D3 v6及以上版本已经移除了全局的d3.event对象，该写法仅支持D3 v5及更早版本。新版本中事件对象会直接作为事件回调函数的第一个参数传入，不再挂载到d3全局对象上。
• d.area显示undefined：D3 v6+调整了事件回调的参数顺序，旧版本回调参数顺序为(绑定的数据d, 索引i, 选中的节点集合nodes)，新版本参数顺序调整为(事件对象event, 绑定的数据d, 索引i, 选中的节点集合nodes)。如果你的回调函数依然按旧写法只接收第一个参数，那拿到的实际是事件对象而非绑定的数据，自然访问不到d.area属性。

修复方案 #

调整事件绑定的回调参数，将事件对象作为第一个入参，绑定数据作为第二个入参，坐标直接从事件对象中获取即可，示例如下：

// 适配D3 v6+的正确写法
.on('mouseover', function(event, d) {
  tooltip.html(d.area + "%")
    .style("left", (event.pageX + 3) + "px")
    .style("top", (event.pageY + 5) + "px")
})

内容的提问来源于stack exchange，提问作者DeanWinchester88