Search code examples
javascriptd3.jstooltip

x position of tooltip in d3 stacked bar chart not working

I don't really know why but my xPosition in the stacked bar chart that I am working on is not really working. Can someone tell what I am doing wrong?

No matter what bar I hover over it always comes out on the side:

enter image description here

Here's a JS Bin code that I am working on: https://jsbin.com/qudoyewiba/edit?js,output

All help is appreciated. Thanks!

Solution

  • Inspect the console, the console is your friend. You have a lot of NaNs. The reason is simple: your rect elements don't have a "x" attribute. So, this doesn't work:

    var xPos = parseFloat(d3.select(this).attr("x"));

    Instead, you have to get the "x" translation of the group that is the parent of that respective rectangle:

    var group = d3.select(d3.select(this).node().parentNode);
var xPos = d3.transform(group.attr("transform")).translate[0];

    Here is your working code: https://jsbin.com/dutetokoti/1/edit