D3 mouseover event bug?

JavaScript
#1

In my bar chart, I am almost finished.
See my CodePen for details.
If I hover over a bar, it won’t always show the tooltip.
The mouseover event handler is added on JavaScript line 56.
I am not 100% certain, but I do believe it worked just before, then I changed something, realised it didn’t work and changed it back, and now I can’t fix it again…

Any help is greatly appreciated!
Thank you in advance,

  • Andreas
#2

Try adding transition to the tooltip, when I did that it stopped flickering :slight_smile:

1 Like
#3

Thank you, but I’m not sure if that works for me? Hmm…

import * as d3Transition from "https://cdn.skypack.dev/d3-transition@2.0.0";

  // Create tooltip
  const tooltip = d3.select("body").append("div")
    .transition()
    .attr("id", "tooltip")
    .html("Hello")

Don’t mind the “Hello”, that’s just while I test ofc.
Am I using the transition correctly though? I’ve imported d3-transition using CodePen’s own feature…

#4

I think that transition is already included in d3 so you don’t have to import another package.

You can also specify the duration of the transition, like this:

tooltip
  .transition()
  .duration(300);

Regarding your error, try modifying the tooltip positioning on mouseover, because it seems that it’s overlapping with the cursor:

d.pageX  + "px"
d.pageY + "px"

Lastly, now that you created the tooltip using d3 you can use it to replace the repetitions in your code:

document.getElementById("tooltip").innerHTML = d.path[0].dataset.date.slice(0,4) + " " + temp + "<br>$" + d.path[0].dataset.gdp + "billion";
document.getElementById("tooltip").style.visibility = "visible";
document.getElementById("tooltip").setAttribute("data-date", d.path[0].dataset.date);

It should go like this:

tooltip
  .style('visibility', 'visible')
  ... and so on
1 Like
#5

Thank you so much!
I made it work now, I think I had misunderstood how and where to use transition…
But thank you, it really helps!
Now I just need to make it pretty before I submit it :wink:

#6

Happy to help, good luck with the styling :wink:

1 Like