D3 Bar Chart test 14 not passing(Need some help)

[salmanthasleem]

I somehow passed all the tests so far by looking at the code written by FCC .
However, I’m having trouble passing the final test, that is

My tooltip should have a “data-date” property that corresponds to the “data-date” of the active area.

Here’s my code so far,(Please note that, I’ve copied only the relevant code below)
Link to this project, https://codepen.io/salmanthasleem/pen/eYWzLbb?editors=0111

const arr = data.data;
const years = arr.map((elem) => new Date(elem[0]));
const yearsString = arr.map((elem) =>elem[0].substring(0,4));
var gdps = arr.map((elem) => elem[1]);
var tooltip = d3.select("#chart").append("div").attr("id", "tooltip").style('opacity', 0);
svg
      .selectAll("rect")
      .data(arr)
      .enter()
      .append("rect")
      .attr("x", (d, i) => xScale(years[i]))
      .attr("y", (d, i) => yScale(gdps[i]))
      .attr("width", w / data.data.length)
      .attr("height", (d, i) => h - padding - yScale(gdps[i]))
      .attr("class", "bar")
      .attr("data-date", (d, i) => d[0])
      .attr("data-gdp", (d, i) => d[1])
      .attr("fill", "navy")
      .on('mouseover', function (d,i) {
        tooltip.style('opacity', 1);
        tooltip
          .attr("data-date",()=>d[0])
          .html(()=>
            d[0] +
              '<br>' +
              '$' +
              d[1] +
              ' Billion'
          )
          .style('left',()=> i * barsize + 30 + 'px')
          .style('top', h - 100 + 'px')
          .style('transform', 'translateX(60px)')
          
      })
      .on('mouseout', function () {
        tooltip.style('opacity', 0);
      });

CSS for #tooltip

#tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 150px;
  height: 50px;
  padding: 2px;
  font: 12px;
  background: lightsteelblue;
  box-shadow: 1px 1px 10px;
  border-radius: 2px;
  pointer-events: none;
}

I hope I get this fixed anytime soon, been at it since yesterday and it’s really frustrating to get stuck at something like this.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

freeCodeCamp.org

[AndrewAung11]

@salmanthasleem You only need an element with id of tooltip. You don’t have to append element with id of tooltip for each rect.

[salmanthasleem]

FCC’s example project has appended an element and is still working
here’s there code,(https://codepen.io/freeCodeCamp/pen/GrZVaM?editors=0010)

var tooltip = d3
  .select('.visHolder')
  .append('div')
  .attr('id', 'tooltip')
  .style('opacity', 0);

var overlay = d3
  .select('.visHolder')
  .append('div')
  .attr('class', 'overlay')
  .style('opacity', 0);

var svgContainer = d3
  .select('.visHolder')
  .append('svg')
  .attr('width', width + 100)
  .attr('height', height + 60);

[manjupillai16]

Hi @salmanthasleem ,

The input parameters to the function on ‘mouseover’ are event and data i.e.
.on('mouseover', function(event, data) {....

Basically in your code, input parameter ‘i’ represents your data and if you change d[0] to i[0] in your code below, it should work:

tooltip
          .attr("data-date",()=>d[0])   <-- change d[0] to i[0] 

Try doing a console.log of variables d and i inside the mouseover function to see the values of the variables.
Hope this is clear.

[salmanthasleem]

Thank you for clearing this up for me
May I know what does the d parameter represent?

[manjupillai16]

d is the event parameter: has lots of key-value pairs related to the Mouse Event.
It could be also be useful while setting the x and y co-ordinates of the tooltip. I used the e.pageX and e.pageX values to set the position of my tooltip div.

Do a console log as below, will help to understand:

.on('mouseover', function (d,i) {
        console.log(d,i);