Issues with Data Visualization Project 1 Bar Chart Tests

21

I had the same issue with tooltips – thanks all for the help with this!

For anyone still struggling:

One update based on a change from d3.v5 to d3.v6:
The callback function passed to the mouseover and mouseout events needs two arguments, event, and d (the current datum). That is the only way you can access the data points to display the GDP data. If you only pass d as an argument it will be undefined. Here is the updated code:

.on('mouseover', function(event, d) {
     d3.select(this).attr("fill", "white");
         tip.attr("data-date", d[0])
            .html(`${d[0]}, $${parseInt(d[1], 10)}`)
            .style("visibility", "visible")
            .style("top", `${event.pageY - 20}px`)
            .style("left", `${event.pageX + 20}px`)
}

Links to some helpful resources on this topic:
Stack Overflow (thanks to Andrew Reid for the post!)
GitHub d3 events

1 Like