So, I’m currently working on the Bar Chart project and I can’t get the tooltip to display instantly on mouseover in order to pass tests #13 and #14. Here’s my code so far:
document.addEventListener("DOMContentLoaded", function() {
$.getJSON(
"https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json",
function(dataset) {
console.log(dataset);
const padding = 2;
const numberOfElements = dataset.data.length;
const h = 500;
const w = 3 * numberOfElements;
const yScale = d3
.scaleLinear()
.domain([0, d3.max(dataset.data, (d, i) => dataset.data[i][1])])
.range([0, h]);
const container = d3
.select("body")
.append("svg")
.attr("height", h)
.attr("width", w);
container
.selectAll("rect")
.data(dataset.data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("data-date", (d, i) => dataset.data[i][0])
.attr("data-gdp", (d, i) => dataset.data[i][1])
.attr("x", (d, i) => 3 * i)
.attr("y", (d, i) => 500 - yScale(dataset.data[i][1]))
.attr("width", 2)
.attr("height", (d, i) => yScale(dataset.data[i][1]))
.attr("fill", "red")
.append("title")
.attr("id", "tooltip")
.attr("data-date", (d, i) => dataset.data[i][0])
.text((d, i) => dataset.data[i][0])
.on("mouseover", (d) => {
this.style("visibility", "visible");
});
}
);
});