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

Question

遇到这个问题。你能看看吗？ https://codepen.io/DeanWinchester88/pen/BaZYewv

          tooltip.html(d.area + "%")
         // .style("left", (d3.event.pageX + 3) + "px")
         // .style("top", (d3.event.pageY +  5) + "px")

Answer 1

有几个问题。首先，您在事件侦听器中交换了参数的顺序。第一个参数是事件，第二个参数是数据。其次，您可以使用 event.pageX 和 event.pageY.

，而不是 d3.event.pageX 和 d3.event.pageY

这是一个例子：

  .on("mouseover", (event, d) => {
    tooltip.style("opacity", .7)
        .style("left", (event.pageX + 3) + "px")
        .style("top", (event.pageY +  5) + "px")
        .html(d.area + "%");
  })
  .on("mouseout", (event, d) => {
    tooltip.style("opacity", 0)
  })

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

d3 why on mousehover field is undefined and d3.event is undefined too?

d3.js