Why can't my D3 on.mouseover access my dataset

I’m currently working on the D3 certifications.
I’m nearly done with the user stories for the first one, only needing to do the tooltip. But I’m encountering a challenge that, when I google the issue, every solution seems to be implementing it the way I’m doing.

my code is here:

I still have a lot of cleanup to do, but the issue is around 1173, where I have the following code:

svg.selectAll("rect")
     .data(dataSet)
     .enter()
     .append("rect")
     .attr("data-date", (d) => d[0])
     .attr("data-gdp", (d) => d[1])
     .attr("width", barWidth)
     .attr("x", (d,i) => { return (i*barWidth) + padding})
     .attr("y", (d,i) => { return yScale(d[1])})
     .attr("height", (d) => {return h - yScale(d[1]) - padding})
     .attr("class", "bar")
     .on("mouseover", function (d, i) {
         tooltip.transition()
          .duration(200)
          .style("opacity", 0.9)
         tooltip.html("<p>Date: " + d[0]+ "</p>" + "<p>GDP: $" + d[1] + " Billion</p")
         .attr("data-date", d[0])
         .style('left', (i * barWidth) + 30 + 'px')
         .style('top', h - 200 + 'px')})

      .on("mouseout", function (d, i) {
         tooltip.transition()
         .duration(200)
         .style('opacity', 0)}) 

The tooltip will show up, however for all the amounts it returns undefined. Why is that?

When I googled the issue, I came across articles like these: How to Show Data on Mouseover in d3.js | Tutorial by Chartio or Show data on mouse-over with d3.js | by KJ Schmidt | Medium
and when I checked out their code, their mouseover event was able to access the data in . data.

tooltip.html("<p>Date: " + d[0]+ "</p>" + "<p>GDP: $" + d[1] + " Billion</p");

Are you sure it’s the variable d you want to use here? It’s a good idea to use more descriptive variable names so you don’t forget what data they hold. The mouseover callback is being passed two arguments, d and i. What do those stand for?

It’s the same as for all the .attr, where d is for the data of that element, and i is for the index of that element.
It should give me for the first bar a result of:
Date: 1947-01-01
GDP: $ 243.1 Billion

I’m not sure “data” in this case is the data you are looking for. Do you have any ideas on how you can verify that these two variable are giving you the information you want and which one you should use?

I feel like I’m not understanding, I’m sorry. When I .append some title file with a text, and checked for d[0], d[1] and i, they all gave me that specific information that I’m looking for. All of these .attr are referring to this dataset as well.


And there I also used this convention of d for data and i for index, and it works.

I’m sorry, I’m feeling really stupid I don’t understand your help here.

I’m trying to help you debug your code without just giving you the answer. This is a very important skill to learn. So hopefully you won’t think I’m a jerk by seeming not to be too helpful.

What I’m saying is that you should verify that the values for d and i being passed into the callback for the mouseover handler are exactly what you think they are. How would you go about doing that?

1 Like

absolutely, 100%, I really appreciate your help, and also the nudging in a direction to figure it out. I think I see now, I wasn’t looking at the value for the bar, I had to check the value of the index bar, which now gives me the proper tooltip. looking back on it, seems so obvious.

I was checking it with console.log, and realised where the issue way. thank you for your help, I deeply appreciate it

1 Like

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