D3 Tree Map - Did not pass the tooltip tests?

JavaScript
1

good day every one,
I have been working on the tree map project and I think I did everything required but I failed 2 tests so if anyone can help take a look to see what I am doing wrong, please?

This is the live site: D3 Tree Map

and you can find my code here: GitHub - Ghada0196/D3-Tree-Map

Link to the challenge: https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram

Thanks in advance

2

It appears from your code that you are triggering the tooltips from events on your text label divs and not from your SVG rects, which the spec implies and I believe the tests use. You may be able to use the div labels as long as you pass the mouse events through the label divs if you like but I haven’t tested that on this project.

If that doesn’t resolve the problem you can post a codepen link for more debugging; I’m just too lazy to copy and paste it from github myself.

3

Thanks for the response.
It’s true that I opted for putting divs on top of the rect elements so I can wrap the text. I passed the mouse events through the divs since they hide the rect elements. Is that what you were suggesting as the solution? I am sorry english is not my first language. But as I said, the tooltip works and all but I just can’t pass the tests.
I actually tried adding text elements to my SVG rects and it passed all the tests but then the text would appear cluttered and I found no way to control it.
Is there no solution in-between?

Here is a codepen link : https://codepen.io/ghada0196/pen/ZEoJBgy

4

I think using divs as labels is a good solution if you can get it to work. It’s much nicer than unformatted labels and seems easier than some of the D3 solutions with text attributes I’ve seen. The event pass through to which I was referring is the CSS pointer-events and you may be able to set that on the text label divs or the tile rects to get the behavior you want.

When I set up your project locally, I messed it up and had the labels separate from the tiles and confirmed that the labels are firing the tooltip and not the tile. The relevant code

// tiles
  svg.append("g")
    .selectAll("rect")
    .data(root.leaves())
    .join("rect")
      .attr("class", "tile")
...

// labels
d3.select("#text-labels")
  .selectAll("div")
  .data(root.leaves())
  .enter()
  .append("div")
  .attr("class", "label")
...   

// tooltip
d3.selectAll(".label")

confirms the behavior I saw with the tooltips attached to the divs (d3.selectAll(".label")) while the tiles should be the elements selected.

Once fixed, I was able to confirm that you don’t need the CSS pointer-events property and the tests passed with just a small fix.

5

Thank you for the help. The CSS pointer-events actually helped a lot.
I did change the event to trigger by the rect elements and it passed all the tests but in reality the tooltip did not show up on the page because the rect elements are overlayed by my divs.
So I ended up setting the pointer-events to none to my div text-labels which encapsulates all my label divs and that fixed the issue :grin:
Thank you again for taking your time to help me. I learned something new.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.