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

Got this problem. Could you have a look? https://codepen.io/DeanWinchester88/pen/BaZYewv

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

CodePudding user response：

There are a couple of problems. First, you have the order of the parameters swapped in your event listener. The first parameter is the event and the second parameter is the datum. Second, rather than d3.event.pageX and d3.event.pageY, you can use event.pageX and event.pageY.

Here's an example:

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