Tooltips

[gerardjk]

The code for tooltips seems to have changed between d3 versions.

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

                //Get this bar's x/y values, then augment for the tooltip

                var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;
                var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;

                //Update the tooltip position and value
                d3.select("#tooltip")
                    .style("left", xPosition + "px")
                    .style("top", yPosition + "px")
                    .select("#value")
                    .text(d);

Returns "Object Mouse Event" in the tooltip rather than the actual number. I got it to work by changing function(d) to function(e,d)

[hongtaoh]

Thanks @gerardjk. I found the same problem. I tried your solution and it did work. Do you happen to know why it worked that way?

[scotthmurray]

Thanks @gerardjk! I'm guessing you're right, and this is something that changed about the API in v5 or newer. (The example here are only guaranteed to work with D3 v4.5.0, as included in this repo.)

I've tagged this issue and will leave it open, so if and when I update the book, I will be sure to catch this.