Uncaught TypeError: Cannot read property 'pageX' of null

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:

1 Like

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.


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.