index.Year instead of item.Year

[danmikes]

Tell us what’s happening:
Describe your issue in detail here.

I have this weird issue. I must use index.Year instead of item.Year. Everyone else seems to use item and it works in the rest of the code, but not for tooltip. I don’t understand why.
Below is the piece of code, link to codepen is:

scatterplot

Your code so far

    .on('mouseover', (item, index) => {
      tooltip.transition()
        .style('visibility', 'visible')
      if (index.Doping != '') {
        tooltip.text(`${index.Year} - ${index.Name} - ${index.Time} - ${index.Doping}`)
      } else {
        tooltip.text(`${index.Year} - ${index.Name} - ${index.Time} - no allegation`)
      }
      tooltip.attr('data-year', index.Year)
    })

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36

Challenge: Visualize Data with a Heat Map

Link to the challenge:

freeCodeCamp.org

[manjupillai16]

Hi @danmikes ,

Try doing a console.log(item, index); inside your .on mouseover function.

The item variable is a MouseEvent which holds all the details about the mouse co-ordinates, etc
And the index variable is your data point over which the mouse was hovered.

The reason why it worked differently for others is probably due to the d3 version. I guess they are using an older version than you.

[danmikes]

Thanks a lot for your response! console.log(item) shows undefined, and index shows the value. How interesting that this suddenly changed with a new version of d3. I would have never thought of this. I must have tried index out of pure curiosity! Thanks again for your swift answer!

[manjupillai16]

Try hovering over a data point in the graph to see ‘item’ on the console. I could see the MouseEvent details.

I know…I struggled a lot with different d3 versions!!