It appears that there may have been a misunderstanding regarding d3 scaling. Typically, an object is assigned using the .data() method, such as
.data([{ name: 'hello world', value: 12 }])
. However, you utilized
scaledGDP, which has resulted in losing other pertinent information and being reduced to just a number. If you utilize
GDP instead, you can then access the scaled value by utilizing, for instance,
rect.attr('height', function(d) return linearScale(d); })
.
In addition, it seems that your tooltip did not function as expected due to a couple of issues. Firstly, the usage of on('click') was duplicated - once for adding the tooltip and once for removing it, causing the latter to overwrite the former. Secondly, you treated tooltip as an HTML element when it is actually a d3 selection, so employing .classed() over classList() is more appropriate. Lastly, according to the migration guide, event should now be the first argument within the function, rather than d.
All these points result in the following:
CSS:
#tooltip {
opacity: 0;
}
#tooltip.show {
opacity: 1;
}
Javascript
.on("click", (event, d, i) => {
if(!tooltip.classed("show")) {
tooltip.classed("show", true)
.html(`<small>${d[0]}</small>$${d[1]} billions`)
.attr("data-date", d[0])
.style("left", i * barWidth + padding * 2 + "px")
.style("top", height - padding * 4 + "px");
} else {
tooltip.classed("show", false);
}
});
The tooltip is operational now and positioned correctly, although the content is not yet populated due to the difference between scaledGDP and GDP.