Scatterplot Graph hovering points produce "undefined" result

Hi all, I am having trouble getting the correct output when I hover over the points. It’s supposed to show up something in the format of “year - name - time - doing allegation”, however, it’s showing up “undefined - undefined - undefined - undefined” instead. I wonder where the problem could be. Can anyone please help me identify the problem?
Thanks in advance!!!

Here’s the code chunk of the mouseover function:

.on('mouseover', (item) => {
            tooltip.transition()
                .style('visibility', 'visible')
            
            if (item['Doping'] !== ""){
                tooltip.text(item['Year'] + ' - ' + item['Name'] + ' - ' + item['Time'] + ' - ' + item['Doping'])
            } else {
                tooltip.text(item['Year'] + ' - ' + item['Name'] + ' - ' + item['Time'] + ' - ' + 'No Allegations')
            }
            
        })

        .on('mouseout', (item) => {
            tooltip.transition()
                .style('visibility', 'hidden')
        })

I couldn’t find any problem with the code chunk itself. It might be issues relating to other parts of my code.

My complete code (incl. HTML & CSS) can be found on my GitHub

Any help is greatly appreciated!!! - Chris

Did you log out what item is and can you identify what it is?

https://github.com/d3/d3-selection#selection_on

When a specified event is dispatched on a selected element, the specified listener will be evaluated for the element, being passed the current event (event ) and the current datum (d ), with this as the current DOM element (event .currentTarget).

The first parameter is an event object in the handler, the second is the data.

(event, item) =>

Thanks for your reply!

item is just an object I created in the function that represents a single data point . If the “Doping” value of that data point is not an empty string, meaning that there is doping allegation, I want to return the Year, Name, Time and the Allegation. If it’s an empty string, the Doping Allegation would be “No Allegations”.

You must not have logged it out or read the documentation I pointed to. I also explicitly told you what it is in the blurred-out part.

being passed the current event (event ) and the current datum (d )

(event, datum) =>

.on('mouseout', (item) => {
            tooltip.transition()
                .style('visibility', 'hidden')
        })

Knowing this, what is item in this code?

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