CODEWITHSUNDEEP
javascriptcsvd3.js
Layne
Layne

Reputation: 672

d3.js loading a csv throwing a TypeError in Chrome and something [native code] in Safari

So I pushed a d3 project back in July and it was working. I pulled it down today to update and after running an npm install I'm getting errors from d3.csv()

With the following...

d3.csv('js/data/data1.csv', (returnedData) => {
    console.log('RETURNEDDATA', returnedData);
});

In Chrome's console it traces out an array of 10 objects that have the right column headers but the values are all NaN plus there's an extra attribute that reads...

1: TypeError: Failed to execute 'fetch' on 'Window': Failed to parse URL from //localhost:80js/data/data1.csv

In Safari I get something similar but it reads...

0 {[native code]: "initializeFetchRequest@[native code]", 3P%: NaN, AST: NaN, BPM: NaN, FG%: NaN, …}
1 {[native code]: "[native code]"}
2 {[native code]: "fetch@[native code]"}
3 {[native code]: "_onFinish@http://localhost:3000/js/scripts-bundle.js:18:27206"}
4 {[native code]: "http://localhost:3000/js/scripts-bundle.js:18:26091"}
5 {[native code]: "emit@http://localhost:3000/js/scripts-bundle.js:12:30954"}
6 {[native code]: "finishMaybe@http://localhost:3000/js/scripts-bundle.js:18:13349"}
7 {[native code]: "endWritable@http://localhost:3000/js/scripts-bundle.js:18:13432"}
8 {[native code]: "end@http://localhost:3000/js/scripts-bundle.js:18:16918"}
9 {[native code]: "end@http://localhost:3000/js/scripts-bundle.js:18:29326"}
10 {[native code]: "send@http://localhost:3000/js/scripts-bundle.js:19:13018"}
11 {[native code]: "send@http://localhost:3000/js/scripts-bundle.js:8:4724"}
12 {[native code]: "http://localhost:3000/js/scripts-bundle.js:21:3849"}
13 {[native code]: "mightThrow@http://localhost:3000/js/scripts-bundle.js:15:6588"}
14 {[native code]: "http://localhost:3000/js/scripts-bundle.js:15:7221"}

Any idea what causes this? I've updated from 4.9.? to 4.10.2 with no success.

Upvotes: 1

Views: 730

Answers (2)

guypursey
guypursey

Reputation: 3194

Change your package.json file to 4.10.0, run npm install or npm update again, and the problem seems to go away.

It looks like this is an issue with a dependency in the latest version of D3 -- namely something happening within the package d3-request version 1.0.6. If you roll back to D3 version 4.10.0 that uses the earlier version of d3-request, namely 1.0.5, which doesn't seem to have this problem.

I've raised an issue over at the d3-request repository so hopefully this is something that can be fixed in the next patch. Feel free to throw your own comment in there so that everyone can see this is an issue affecting more than one person: https://github.com/d3/d3-request/issues/29

And please add your own details there if they differ from what I've described.

Upvotes: 1

Layne
Layne

Reputation: 672

So apparently there's something happening when you install d3 with NPM. Wiping d3 out and importing the library from a CDN instead fixed my problem. Apparently, one of the NPM installed dependencies is messing things up with the URL. Note the :80js in Failed to parse URL from //localhost:80js/data/data1.csv

Upvotes: 0

Related Questions