CODEWITHSUNDEEP
d3.js
user3611
user3611

Reputation: 151

D3 graph not updating on click

My line chart is not updating with new data once I click the black button and I'm not sure what I could possibly be doing wrong.

Block here:

Upvotes: 1

Views: 93

Answers (2)

Andrew Reid
Andrew Reid

Reputation: 38211

Let's look at your NaN errors:

<path class="line" d="M0,324.19471776281716L0,NaNL155,NaNL155,270L310,270L310,353.84774728120146L465,353.84774728120146" transform="translate(78.1818,0)"></path>

Seems that we are missing two y values, we can see this if we split the path data into its x,y pairs:

M0,324.19471776281716
L0,NaN
L155,NaN
L155,270
L310,270
L310,353.84774728120146
L465,353.84774728120146

So, we need to check two things, one is the y scale, and the other is the data used in the y scale. The y scale looks ok, if it failed on one number it should fail on all numbers. Let's look at the csv data:

education,number
Bachelor's degree,2367
Degree in medicine, dentistry, veterinary medicine or optometry,5763
Earned doctorate,3862
Master's degree,1549

Here's our problem: we have a comma separated file type with lots of extra commas on the second row (not counting the column headers). We can see that is causing issues with the name of the second column in the alternate data: "Degree in medicine", the portion of the name beyond the comma is dropped. Let's entomb that data with quotations so that the commas won't count as delimiters:

education,number
Bachelor's degree,2367
"Degree in medicine, dentistry, veterinary medicine or optometry",5763
Earned doctorate,3862
Master's degree,1549

Upvotes: 2

Cory Kleiser
Cory Kleiser

Reputation: 2034

You're code in your update function is selecting #body when #body (id="body") doesn't seem to exist. Could you be meaning to use body instead to select the html body?

Upvotes: 1

Related Questions