无法显示带有JSON文件的地图d3.js

我有以下代码，我正在尝试制作除南极洲之外的世界地图。无法显示带有JSON文件的地图d3.js

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <style> 

    body { 
     background-color: white; 
    } 
    svg { 
     background-color: white; 
    } 

    </style> 

</head> 

<body> 
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script src="//d3js.org/topojson.v1.min.js"></script> 
    <script> 
    var width = 960, 
     height = 1160; 

    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height); 

    d3.json("countries.json", function(error, world) { 
     if (error) return console.error(error); 
     console.log(world); 
}); 

     svg.append("path") 
      .datum(topojson.feature(world, world.objects.subunits)) 
      .attr("d", d3.geo.path().projection(d3.geo.mercator())); 
    }); 
    </script> 
</body> 
</html>

当我尝试打开HTML页面没有出现，而它给人的错误是：https://bost.ocks.org/mike/map/：

Failed to load resource: net::ERR_FILE_NOT_FOUND

我从迈克·博斯托克的教程，可以在这里找到以下。我已经尝试了许多命令，并试图使用它的通讯路径来访问文件。这些都是我试过（使用它们的记者本地主机连接）的命令：

python -m SimpleHTTPServer 
python3 -m http.server 
npm install -g http-server 
http-server -c-1

如果有人能告诉我什么，我做错了，那就太棒了！我检查了我的代码一千次，我真的不知道我做错了什么。在此先感谢！

我试图在Firefox中打开文件，现在它给人的错误是：

TypeError: world.objects is undefined

来源

2016-06-13 Andrea

'countries.json'与index.html位于同一个目录吗？ – MrWillihog

是的，该文件是在同一个目录！ – Andrea

'svg.append'块必须位于'd3.json'函数内。 –

首先是：当你制作地图时必须定义：地图的中心，比例和投影。（这是字地图不需要中心）

第二个：你的数据是一个geojson，你用它作为.topojson。永诺尝试使用.topojson：

原始文件（以GeoJSON）：561 KB
转换的文件（topoJSON）：75 KB

在这里你可以找到你的地图转换：

TopoJSON Word Map

而且这里的完整代码：

<head> 
    <meta charset="utf-8"> 
    <style> 
    body { 
     background-color: white; 
    } 
    svg { 
     background-color: white; 
    } 
    .county { 
     fill:#696; 
     stroke:#666; 
     stroke-width:1px; 
    } 
    </style> 
</head> 
<body> 
    <!-- D3 Base --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script> 
    <!-- TopoJSON Library --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script> 
    <script> 
    var width = 960, 
     height = 1160; 

    var scal = (1 << 10)/2/Math.PI;  //<-- Scale 
    var projection = d3.geo.mercator().scale(scal).translate([width/2, height/2]);   //<-- Projection 
    var center = projection(cent); 
    var path = d3.geo.path().projection(projection); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height); 

    d3.json("word.topojson", function(error, world) { 
     if (error) return console.error(error); 

     var countries = topojson.feature(world, world.objects.collection); 
     svg.selectAll("path") 
      .data(countries.features) 
     .enter() 
      .append("path") 
      .attr("class", "county")  //<-- Class to style your countries 
      .attr("d", path); 
    }); 
    </script> 
</body> 
</html>

那会给你这样的事情：

建议

植酮SimpleHTTPServer，做工精良但最好去的东西更扎实。如果您在Windows或XAMPP上安装WAMP，如果您在Linux上
尝试不同的浏览器，我发现Firefox和SVG和Maths有一些错误。整体投影数学和表示.-

来源

2016-06-13 17:38:46 Klaujesi

好吧，感谢您的帮助！我要试试这个！ :) – Andrea

“var scal =（1 << 10）/ 2/Math.PI;”是做什么的？我正在尝试在经度和纬度之间投影一些线条，但所有线条项目均在svg对象中进行了镜像...您是否知道为什么发生这种情况？ – Andrea

缩放地图，将'10'改为'12'或'20'并检查您的地图。你会注意到它的工作原理;） – Klaujesi

@Gerardo朵是正确的。您需要将svg包装在d3.json调用中。这使用uk.json例如：

d3.json("https://bost.ocks.org/mike/map/uk.json", function(error, world) { 
    if (error) return console.error(error); 
    console.log(world); 

    svg.append("path") 
    .datum(topojson.feature(world, world.objects.subunits)) 
    .attr("d", d3.geo.path().projection(d3.geo.mercator())); 
    });

当我插入到您的代码，我可以看到一个英国的小地图。

来源

2016-06-13 14:04:42 smoore4

。他与：countries.json合作。我们必须看到内容。也许他没有使用：world.objects.subunits – Klaujesi

我认为@Klaujesi是正确的，因为我试图用这个代码来实现它，它也没有工作... – Andrea

无法显示带有JSON文件的地图d3.js

回答

相关问题