D3 Tree Map Project

JavaScript
1

Hi. What is wrong with my code. I receve an error on the d3.event.pageX and d3.event.pageY, my tooltip isn’t show and I failed the last two tests.

https://codepen.io/Alincos/pen/ExKrWYN

Challenge: Visualize Data with a Treemap Diagram

Link to the challenge:

2

Hi @Alincos. You are using d3 v6. There are some changes introduced in v6 which are not backwards compatible. If you want to get cursor position, you use d3.pointer(event) which returns an array of two integers. If I change your mouseover event handler to

.on('mouseover', (d, i) => {
      const { name, category, value } = i.data;
      const[x, y] = d3.pointer(d);
      tooltip.classList.add('show');
      tooltip.style.left = x + "px";
      tooltip.style.top =  (y) + 'px';
      tooltip.setAttribute('data-value', value);
      
      var nf = new Intl.NumberFormat();

      tooltip.innerHTML = `
        <p><strong>Name:</strong> ${name}</p>
        <p><strong>Category:</strong> ${category}</p>
        <p><strong>Value:</strong> ${nf.format(value)}</p>
      `;
  })

the tooltip shows and the tests pass. Check the d3.js v6 migration guide here.