Data Visualization Bar Graph

JavaScript
1

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

2

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.

3

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