D3 地图未显示在本地服务器的浏览器中

Question

我正在制作显示中国各省的 D3 地图。我尝试了几种不同教程的组合，但未能使地图显示在使用 python 本地服务器的浏览器中。

我可以看到地图的信息已经正确输入到g元素中，而且GeoJSON文件确实包含了32个省份。那我一定是做错了什么显示它？

请在此处查看我的代码：https://github.com/claiye/map/blob/master/index.html 这很混乱，因为我尝试了几个不同的教程，但它们对我的目标不起作用。

请指出我一定犯了什么愚蠢的错误。非常感谢您的帮助。提前致谢！ :)

Answer 1

问题是创建的路径不在 svg 和 g 标签内。请检查我的两个评论。我已验证以下代码正在运行。

<!DOCTYPE html>
<meta charset="utf-8">
<title>Map Testing</title>
<style>
    .province{
        fill:#ccc;
    }
</style>
<body>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript">

    var width = 960; 
        height = 500;

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

    // Removed the slash before provinces.geojson
    d3.json("provinces.geojson", function(error, provinces) {
        if (error) return console.error(error);

        svg.append("g")
            .selectAll("path")
            .data(provinces.features)
            .enter()
            .append("path")
            .attr("class","province")
            .attr("d", d3.geo.path().projection(d3.geo.mercator().center([0,5]).scale(200).rotate([-180,0]))); // Added center and rotate here
});
</script>
</body>
<html

D3 地图未显示在本地服务器的浏览器中

D3 Map not showing up in browser on local server

javascript

geojson

d3.js