I can render Treemap on HTML, but not on JS ¿?

Hi everyone, and thanks for reading.

I finished the D3 Treemap project and all tests pass. I’m curious to know why the treemap renders when I program all of my code on Codepen’s HTML section, but not when I split it between the HTML and JS section (the interaction between both sections has been sort of a blind spot for me since I started learning)

The HTML has a

element to which I attach the SVG “canvas” (as I call it) and Tooltip elements.

Here’s my CodePen:

https://codepen.io/RodrigoHLC/pen/BaMBvym?editors=1010

You can try really quickly moving the corresponding code (starting at “const req = new XMLHttpRequest();” ) from HTML into the JS document listener ( document.addEventListener(‘DOMContentLoaded’, function() { --PASTE HERE-- }) )

which, to my knowledge, should work. Yet it doesn’t. Is anybody able to pinpoint the problem? If it’s of any use, I get an error message on the ".on(‘mousemove’… " line that reads “Uncaught TypeError: Cannot read properties of undefined (reading ‘pageX’)”.
In regards to external scipts/CDNs, all I have on this codepen is the D3 library.

Even though I pass all the tests, I’d really like to be able to make this work from the JS section, so I can then try to combine it with React (I want to use different states to render the 3 different APIs —Videogame sales, Movies and Kickstarters— and simulate 3 different webpages using a single-page app, but that’s a story for another time… If I can’t even get JS to render the treemap, I can’t move forward)

Thanks in advance to anyone who takes the time to at least read this!

 req.onload=function(){ const
    
    datos=JSON.parse(req.responseText)
   

put thet const down it will be fine…

1 Like

Hello Zaklina,

If what you mean is for my to write it all in one line, like this:

 req.onload=function(){ 
      const datos=JSON.parse(req.responseText)

that didn’t work. Thank you for having taken the time to read and reply though!

Use the D3 script you have in the HTML and remove the one from the Codepen settings. The script in the settings seems to be used instead and it looks to be blocked.

The parameter to the mouse event handlers is different when it is inside the JS vs HTML. Try logging out the parameter inside the handlers. Edit: actually that might have been caused by the script as well (not really sure how or why).

I suspect there have been lots of breaking changes between V4 and V7 so it is likely to be related.

2 Likes

There’s a race condition, I’m not quite sure how it’s occurring (don’t have time to check exactly what just now as it’s late), but I assume it’s caused by what @lasjorg says. Because if I adjust anything in the live editor (like literally just add a space or whatever, anything to trigger the hot reload), the graph shows. But first time I open (and if I open in debug mode, so on a rendered HTML page which has that double load), then no graph. So one of the d3’s is loading, then the other one loads on first live reload (so whichever the one is referenced in the HTML I think)

1 Like

Thank you very much to all of you. Indeed, the problem was that D3 library in CodePen’s settings. And everything seems to be working alright now.

Now I can move on to trying to combine this with React. Might be flying too close to the sun here, but we’ll see. Thanks again for your time and help!

1 Like

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