CODEWITHSUNDEEP
d3.js
DeanWinchester88
DeanWinchester88

Reputation: 109

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

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")

Upvotes: 0

Views: 1488

Answers (1)

Dan
Dan

Reputation: 1591

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

Upvotes: 2

Related Questions