Uncaught TypeError: Cannot read property 'pageX' of null

[jaimeggb]

Hi all

I get this error when trying to implement a tooltip that follows the mouse. I literally use the same code as this codepen (in which it does work): https://codepen.io/freeCodeCamp/pen/EZKqza?editors=0010

line 102: .style('left', d3.event.pageX + 10 + 'px')

error given: “Uncaught TypeError: Cannot read property ‘pageX’ of null
at https://cdpn.io/cp/internal/boomboom/pen.js?key=pen.js-cdb1e3fd-9a44-bbd7-d68e-30195173bba5:102”

What’s going on?

MY code so far: https://codepen.io/JGGB/pen/OJmXBdB?editors=0011

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

Challenge: Visualize Data with a Choropleth Map

Link to the challenge:

freeCodeCamp.org

[manjupillai16]

Hi @jaimeggb ,

The pageX key is a property of the event parameter i.e the first parameter of the handleMouseOver function(event, data).

Change the d3.event.pageX to simply d.pageX in your code:

function handleMouseOver(d,countyDataItem) {  
......
.style('left', d.pageX + 10 + 'px')
.style('top', d.pageY - 28 + 'px');

The reason why it was working in some other code could again boil down to the different d3 versions.