I’m failing the second tooltip test depsite it working as expected when I hover a bar on the chart. Also, the test error is different every time without changing the code. For example:
Tooltip’s “data-date” property should be equal to the active area’s “data-date” property: expected ‘2010-10-01’ to equal ‘2001-10-01’
Tooltip’s “data-date” property should be equal to the active area’s “data-date” property: expected ‘1965-1-01’ to equal ‘2002-01-01’
I’m not sure what’s causing this… Here’s my code:
document.addEventListener("DOMContentLoaded", function() {
$.getJSON(
"https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json",
function(dataset) {
console.log(dataset);
const padding = 60;
const numberOfElements = dataset.data.length;
const h = 500 + padding;
const w = 3 * numberOfElements + padding;
const yScale = d3
.scaleLinear()
.domain([0, d3.max(dataset.data, (d, i) => dataset.data[i][1])])
.range([0, h - padding]);
const tooltip = d3
.select("body")
.append("div")
.attr("class", "tooltip")
.attr("id", "tooltip");
const container = d3
.select("body")
.append("svg")
.attr("height", h + padding)
.attr("width", w + padding);
container
.selectAll("rect")
.data(dataset.data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("data-date", d => d[0])
.attr("data-gdp", d => d[1])
.attr("x", (d, i) => padding + 3 * i)
.attr("y", d => h - yScale(d[1]))
.attr("width", 2)
.attr("height", d => yScale(d[1]))
.attr("fill", "red")
.on("mouseover", (d,i) => {
tooltip
.text(d[0])
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px")
.transition()
.duration(200)
.style("opacity", 1)
.attr("data-date", () => dataset.data[i][0]);
})
.on("mouseout", () => {
tooltip
.transition()
.duration(200)
.style("opacity", 0);
});
const xAxisScale = d3
.scaleLinear()
.domain([1947, 2015])
.range([padding, w - 2]);
const xAxis = d3.axisBottom(xAxisScale).tickFormat(d3.format("d"));
container
.append("g")
.attr("id", "x-axis")
.attr("transform", "translate(0," + (h ) + ")")
.call(xAxis);
xAxis.ticks(5);
const yAxisScale = d3
.scaleLinear()
.domain([0, d3.max(dataset.data, (d, i) => dataset.data[i][1])])
.range([h - padding, 0]);
const yAxis = d3.axisLeft(yAxisScale).tickFormat(d3.format("d"));
container
.append("g")
.attr("id", "y-axis")
.attr("transform", "translate(" + padding + "," + padding +")")
.call(yAxis);
yAxis.ticks(1000);
}
);
});