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:
Here's a JS Bin code that I am working on: https://jsbin.com/qudoyewiba/edit?js,output
All help is appreciated. Thanks!
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;
Here is your working code: https://jsbin.com/dutetokoti/1/edit