Data are there, but I get an Uncaught TypeError

Help
#1

Hello everyone :wave:, I’m new to D3 and to JavaScript in general.

I’m building a treemap, and I can’t resolve an issue I’m having. I’m also not sure if my mistake is D3 related or not.

I’ve uploaded the code on github for reference, and here you can see the page live.

Basically my code should download three datasets regarding the sales of different products categories (see getData.js), then drawing a treemap out of the first dataset on pageload (this happens in index.js, line 6), which appears to work fine.

index.js calls buildPage.js, which in turn calls drawTreemap.js, the function that actually draws the treemap (I’m sorry this is a little convoluted). If you look inside the latter, at lines 8-10, you’ll see that I’m giving each node an id based on the data.name property of the node itself, so that I can later use those ids in the data.join for objects constancy. I’m printing in the console the nodes, and as you can see, everyone of them has the data.id property.

But here’s the issue: the three buttons on top of the page have the onclick property calling the buildPage.js function, each with a different dataset, but if you click anyone of them, you’ll get an Uncaught TypeError at drawTreemap.js:28 stating that data is undefined.

I suspect this has something to do with the function calls in the onclick property of the buttons, but I’m not quite sure:

screen
screen858×465 65.7 KB

Thanks for any help or suggestion.

Ps: I’m sorry that as a new user I have a maximum of 2 hyperlinks per post, so I used inline formatting hoping to make it clearer.

Edit: added a screenshot of index.js where I think the error is.

#2

Greetings,

Can you please share the VizHub link to your work? If it’s in VizHub, it’s a lot quicker to help debug. As it stands, in order to help you, someone needs to clone your repository, run the build, etc.

Also, this is confusing:

<script defer src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

I’m not sure what that is.

#3

Hello Curran,

porting the code on VizHub was my first intention, but I was having some issues. I’ll give it another try.

I forgot to delete that line. This is a project I’m doing for the freeCodeCamp learning program, and that line just provides the test suite for the projects.

Anyway, I’ll share a VizHub link soon, thanks for your time.

#4

There you go:
Sales Treemap

Basically, I’m calling drawTreemap(kickstarters) on page load, and everything seems to work.
But when I call the very same function from the .onclick property of any of the three buttons on the top of the page, something breaks, and the console report that data (at drawTreemap.js, line 43) is undefined, even if (at least so it looks to me) data is defined (have a look at the console, I’m printing nodes, which is an array of object, each one having the property data).

I can’t really see it :bug:.

Edit: console is reporting a warning now that there wasn’t before (Source map error: Error: Invalid URL: . Resource URL: about:srcdoc).

#5

Nice! Thanks for sharing that link.

I’d guess that the selectAll('rect') might be picking up some rects that are not the rects you want. On line 43, it’s not d.data that’s undefined, it’s d itself that’s undefined. This suggests that the selectAll is catching a rect that is not part of the original data join, such as maybe the rect from the clip path.

Changing line 43 to the following should fix it:

const rect = svgArea.selectAll('rect.tile').data(nodes, d => d.data.id);
#6

As for the sourcemap issue, I think that might be a bug. Tracking that here:

#7

That does solve the issue, thank you.

Maybe some rects left from the first render, which gives no error?

True, but before the Source map warning, console was stating that data was undefined, and in fact that’s the error I have in my local version.
If you try in line 43 (note that I just use ‘rect’):

const rect = svgArea.selectAll('rect').data(nodes, d => console.log(d));

d is not undefined and there is no error at all (except for the Source map warning).

Anyway, I think I’ll update this as soon as I finish watching your youtube video on the nested version of the general update pattern. Hopefully I’ll have a better understanding of what is really going on.

Thanks!

#8

This is the error I see when I just use 'rect':

image
image1184×208 40.1 KB

Is this the same error you see? This one means that d is undefined, not data. It says “Cannot read property ‘data’ of undefined”. The “of” means it’s a property of an undefined object.

And yes, it’s selecting rects left over from the first render, probably the ones in the clip path.

#9

Hey, sorry for the delay. I missed the notification of your last replay.
Anyway, you’re right: it was d that was undefined all along.
Thanks for clarifying this for me, I was just getting more and more confused.

I also wanted to say that your D3 video courses are invaluable, you are a great teacher.

1 Like