Visualize Data with D3


Something wrong with ouseover function. It’s as setattribute() doesn’t work. Why the tooltip doesn’t follow the cursor ?
const tooltip = document.getElementById('tooltip'); tooltip.setAttribute('x', i * barwidth + padding); tooltip.setAttribute('y', yScale(d[1]) - padding); });

It’s working fine, for what you’re telling it to do, which is go to (i * barwidth + padding, yScale(d[1]) - padding) and not move. That’s not where the mouse cursor is. Plus, this is mouseover which runs when you mouse over the element, and not when the mouse moves.

To get the usual tooltip behavior, it needs to appear and disappear as needed and if you want it to follow the mouse cursor, you’ll need to use the mouse function that updates on cursor movement and find out how to get the coordinates of the mouse cursor in JavaScript.

I would do it in pieces. Get the appear/disappear working. Get the correct text and attributes for the tooltip. That should pass the tests. Then you can show off and make the tooltip follow the cursor.

Could you compare with this video, time 1:30:52.
For him that’s works, but not for me. I know he will change the way to make his code but I would like to know what is wrong in my code at this moment in order to follow the tuto correctly. Could you tell me where is my mistake in my code ?

Your posted code is drawing the tooltip once according to the coordinates you provided, as I explained. You’ve placed the div with padding and height and other variables that are not related to the cursor position, which is fine, but not at all clear and not good programming. The div doesn’t move for several likely reasons, like using mouseover instead of a more appropriate event and using a D3v5 event callback (d3.on('mouseover', (datum, index) => ...)) instead of a D3v7 callback (d3.on('mouseover', (event, datum) => ...)) to match the version of D3 you’re using. So, you end up with i being one of the data points and not an integer as you expect. console.log(i); (or even better, the values you provide to setAttribute()) in your code to see.

You need to research the other D3 mouse events (google) to find the appropriate events to operate the tooltip and then the DOM mouse events over at MDN to find out how to get the mouse cursor position.

I don’t know how old the video is, but it’s clearly out of date if it’s using event callbacks in the old format unless there are some warnings about it. Likewise, I have some objections to using unrelated variables like height and padding to describe mouse cursor position unless it’s to be fixed. The video must be using an old version of D3 and D3v7 does not behave in the same way any longer.

D3 evolves quickly and major versions are not backwards compatible. Most of the D3 tutorials on the web are old and from D3v3 or v4 when it first got popular and have not been updated, so you really have to use the documentation with D3 itself on github to stay current. The event callbacks are an especially large breaking change that trips lots of people.

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