Why I can't pass the tooltip tests number 2 on D3 Bar Chart projects?

JavaScript
1

Tell us what’s happening:
I can’t pass the tooltip test no. 2. I don’t know what is wrong.

when I try to add this inside (‘mouseover’)
tooltip.attr("data-date", d[0])
it says that tooltip.attr is not a function. Then, I delete it.

If anyone knows what am I missing, please tell me.
Thanks

Your code so far
https://codepen.io/tash2020/full/poydmdZ

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36.

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

2

It says that because tooltip is not a d3 selection, but rather it is natively selected using getElementById.

You can either make your tooptip selection to d3 selection by using d3.select('#tooltip') Or you can keep your native element and use native tooltip.setAttribute function to set the attribute.

That said, your test will still not pass. You’re using d3 v6 but using the mouseover API of d3 v5.
You’ll need to either switch back to d3 v5 OR if you prefer to use d3 v6, look at the migration guide:

3

Thanks for the info.
I’m trying to figured out the right solution from your suggestion. I prefer to still stick with d3 v6 but we’ll see which one is work.

4

I just want to update you and everyone else who also have problem like me.

I’ll try to use d3 v6 and it doesn’t worked. Maybe because I don’t fully understand it yet. I still new to this.

So, I chose to change my d3 version to v5.

It worked!

Thank you very much.

1 Like