search

scotthmurray / d3-book

Code examples for “Interactive Data Visualization for the Web”
http://d3book.com
Other
2.4k stars 1.79k forks source link

Tooltips #47

Open gerardjk opened 3 years ago

gerardjk commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.