'Tooltip' is not moving, neither showing values from Json Dataset

[Usmanthrobsdrums]

Hi everyone,
I have been working on the FreeCodeCamp Projects, having an issue in the Data Visualization Projects (D3).

Unfortunately, I can not clear the ‘Tooltip’ test, since it does not correspond to the ‘data-date’ of the active area. I’m wondering if it’s an issue with the Fetch function, the Json dataset provided by FreeCodeCamp or an error in my code.

Tooltip’s “data-date” property should be equal to the active area’s “data-date” property: expected ‘undefined’ to equal ‘1956-07-01’
AssertionError: Tooltip’s “data-date” property should be equal to the active area’s “data-date” property: expected ‘undefined’ to equal ‘1956-07-01’

Your code so far
Here is the code on Code pen – https://codepen.io/UK020/full/jOmXBXZ

Your browser information:

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

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

freeCodeCamp.org

[jeremy.a.gray]

This is an old d3v5 and earlier call:

    .on('mouseover', (d, i) => {

D3v6 and up (you’re using D3v7) uses:

    .on('mouseover', (event, datum) => {

So in your code, what you call i is actually d in your mouseover event code. Fixing this will pass the tests. It also explains why your tooltip does not move as this code

      tooltip.style.left = i * barWidth + padding * 2 + 'px';

has an i that actually refers to the datum object and not the index, so the first part of this expression (and possibly the entirety) evaluates to something unintended. Regardless, you’ll have to supply your index another way.