Stuck on TooltipTests (#2)

Hi FCC Community,

Being stuck on the first Data Visualization challenge.

More specifically, I seem to not be able to pass the second TooltipTest “My tooltip should have a “data-date” property that corresponds to the “data-date” of the active area.” due to me being unable to populate the data-date property. This property always ends up undefined.

The relevant part of the code is as follows:


const tooltip = d3
      .select("body")
      .append("div")
      .attr("class", "tooltip")
      .attr("id", "tooltip")
      .style("opacity", 0);

svg.selectAll('rect')
  .data(dataset)
  .enter()
  .append('rect')
  .attr("class", "bar")
  .attr('data-date', (d) => d[0])
  .attr('data-gdp', (d) => d[1])
  .attr('x', d => xScale(new Date(d[0])))
  .attr('y', d => yScale(d[1]))
  .attr('width', 4)
  .attr('height', d => height - padding - yScale(d[1]))
  .on("mouseover", (d) => {
        var interim = d[0];
        tooltip.style("opacity", 1);
        tooltip.html("Output: " + interim)
        tooltip.attr("data-date", interim)
   })
  .on("mouseout", () => {
        tooltip.style("opacity", 0);
   })

Does someone have an idea?

Thanks

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36.

Challenge: Data Visualization Projects - Visualize Data with a Bar Chart

Link to the challenge:

@anon26238090 Welcome to the forum.

d in the mouseover event handler is just the MouseEvent object. Try going back to the challenges on hover/tooltip or do a search for d3js tooltip.

Thanks @lasjorg !

Is my approach fundamentally wrong here, or do I just need to tweek my code to somehow load the correct data via event handler?

When I check for tooltip creation, I either find approaches that are structured in a completely different way or that do what I am trying to do here (but they work)…

I’m not a d3js guy, I never really used it and data visualization honestly doesn’t interest me much.

I’m sure there are many ways of doing it but I can’t really give you the “right way”. I would just suggest you look at the API and some example code (d3js tooltip) and see what you can come up with. If you still can’t get it to work post again and maybe I or someone else will show some code (I would need to look at the same information as you first).

Solved it somehow by coincidence; definitely need to review how event handler work in d3. Thanks @lasjorg, you pointed me in the right direction


  .on("mouseover", (d, e) => {
        var interim = e[0];
        tooltip.style("opacity", 1);
        tooltip.html("Output: " + interim);
        tooltip.attr("data-date", interim);
   })

2 Likes