Test failed: pageX is undefined

JavaScript
1

Tell us what’s happening:
hey i am not able to pass the tests in the second fcc project ,however i tried it in codesandbox it works fine there , iin codepen there is an error in the tooltip part , please hep so that i can pass the test.

codesandbox
codepen

Your code so far

.on(“mouseover”, function(d) {
div.style(“opacity”, .9);
div.attr(“data-year”, d.Year)
div.html(d.Name + “: " + d.Nationality + “
”
+ “Year: " + d.Year + “, Time: " + timeFormat(d.Time)
+ (d.Doping?”

” + d.Doping:”"))
.style(“left”, (d3.event.pageX) + “px”)
.style(“top”, (d3.event.pageY - 28) + “px”);
})
.on(“mouseout”, function(d) {
div.style(“opacity”, 0);
});
Your browser information:

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

Challenge: Visualize Data with a Scatterplot Graph

Link to the challenge:

2

Hi @hussamkhatib. You are using the most recent version of d3.js. There are some changes which are not backwards compatible and most tutorials are using older versions. You can read more about the migration guide Here. Your major problem is in the parameters to the mouseover event handler. The handler is now in the form below:

 selection.on("mousemove", function(event, d) {
    … do something with event and d …
  })

The first parameter is the event and the second is the data. In your code you are using the first parameter to access the data yet it is the event. The second parameter to the event handler is the data and it is the one you should use to get Name, Nationality, Year etc.

Since you are using d3 version 6, you can get the mouse position using d3.pointer(event) which returns the x and y coordinates of the current mouse position as an array of 2 elements. If I replace your mouseover event handler with the code below, all the tests pass.

.on("mouseover", function(event, datum) {
      const[x, y] = d3.pointer(event);
      div.style("opacity", .9);
      div.attr("data-year", datum.Year)
      div.html(datum.Name + ": " + datum.Nationality + "<br/>"
              + "Year: " +  datum.Year + ", Time: " + timeFormat(datum.Time) 
              + (datum.Doping?"<br/><br/>" + datum.Doping:""))
        .style("left", (x) + "px")
        .style("top", (y) + "px");
    })
3

in your function add a parameter i, which gonna handle dthe data, the d manipulates de event so you can write something like this:

.on(“mouseover”, function(event, datum) {
const x=d.pageX;
const y= d.pageY;
div.style(“opacity”, .9);
div.attr(“data-year”, datum.Year)
div.html(datum.Name + “: " + datum.Nationality + “
”
+ “Year: " + datum.Year + “, Time: " + timeFormat(datum.Time)
+ (datum.Doping?”

” + datum.Doping:”"))
.style(“left”, (x) + “px”)
.style(“top”, (y) + “px”);
})