Data Visualization Bar Graph

Hi there. I am working on the Bar Graph project and I was looking into how to make tooltips. The problem I’m having is that I can’t get my function to bind with my D3 object.

.on("mouseover", (event, d) => {
          let i = this.getAttribute('index');
          div.transition()
             .style("opacity", 1);
          div.html(d.value)
             .style("left", (event.pageX) + "px")
             .style("top", (event.pageY) + "px");
        })

Whenever this piece of code runs, it creates the tooltip, but I get an error on the initialization of i that says Uncaught TypeError: Cannot read properties of undefined (reading 'getAttribute'). I don’t know what the issue is and I have looked at others code and their this binds with a rect object.

Here is my codepen

This error is telling you that the value of this is undefined. If you need further proof then do a console.log(this).

Look at the arguments that are being passed into your handler. One of them is named event, which is an object containing all of the information about the event that triggered it. This information probably includes the HTML element that was hovered over as well. Do a console.log(event) to see everything that is available to you.