D3.js Bar Chart Tooltips

Codepen

I’m having trouble getting a tooltip to display. The code to hide and unhide the tooltip, as well as populate the tooltip with values, has been tested and works fine. The problem I’m having is setting the tooltip position to the coordinates of a specific bar on the bar graph, specifically lines 44 and 45 of the JavaScript section.

The curriculum didn’t cover tooltips, so I’m following this guide. However, the line d3.select(this).attr("x") does not work as intended; d3.select(this) returns the XMLHttpRequest object, not the specific d3 “rect”. Modifying it to d3.select("rect") selects the entire canvas instead, when I’m trying to get useful coordinates for the specific bar on the graph.

Any help is appreciated. If there is a different more preferred method of displaying tooltips, I’d love to hear about it.

Here is another tutorial, may be it helps, Read D3 Tips and Tricks v4.x | Leanpub

Another thing, the problem must be around this, what javascript is interpreting as this.

Hey, when I change this line, from :

to

  .on("mouseover", function (d) {

something started to work, try it yourself.

1 Like

Thanks; good reminder that that (x) => {} and function(x) {} are not exactly the same thing.