d3 file not working in chrome but works in firefox

问题

I'm working on a team project and the d3 map is rendering correctly on everyone else's computer but mine. Here's my map code snippet:

var g = svg.append("g");

// as written, the function(error, us) callback won't fire until the d3.json finishes
d3.json("json/usa_map.json", function(error, us) {
  g.selectAll("path")
    .data(us.features)
    .enter()

It breaks on us.features and it says there is no method "features" on undefined. Here is my geoJson snippet:

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "GEO_ID": "0400000US04", "STATE": "04", "NAME": "Arizona", "LSAD": "", "CENSUSAREA": 113594.084000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -112.538593, 37.000674 ], [ -112.534545, 37.000684 ], [ -112.368946, 37.001125 ], [ -112.357690, 37.001025 ], [ -111.412784, 37.001478 ], [ -111.405869, 37.001481 ], [ -111.405517, 37.001497 ], [ -111.189888, 37.000959 ], ...

So as you can see... I have a property called "features".

Also, my map works on firefox but not chrome. Any idea what is going on?

The error message that gets passed in the callback:

SyntaxError: Unexpected token { {stack: (...), message: "Unexpected token {"}

回答1:

This means the server's response to json/usa_map.json in this case cannot be parsed as valid JSON. I cannot speculate why, but if you look at the response in the Chrome Dev Tools' Network tab it will probably be obvious.

来源：https://stackoverflow.com/questions/29992232/d3-file-not-working-in-chrome-but-works-in-firefox