javascript - D3 map 未显示在本地服务器上的浏览器中

标签 javascript d3.js geojson

我正在制作一张显示中国各省的 D3 map 。我尝试了几种不同教程的混合,但我未能成功使 map 出现在使用 python 本地服务器的浏览器中。

我可以看到 map 的信息已正确输入到g元素中,并且GeoJSON文件确实包含32个省份。那我一定是在显示它时做错了什么?

请在此处查看我的代码:https://github.com/claiye/map/blob/master/index.html 这很困惑,因为我尝试了几种不同的教程,但这些教程并不适合我的目标。

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

最佳答案

问题是创建的路径不在 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

关于javascript - D3 map 未显示在本地服务器上的浏览器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31772341/

相关文章:

javascript - 如何绕过 JavaScript 变量作用域

javascript - 使用 php 将 mysql 数据转换为 javascript 图表

javascript - CSS3动画播放/暂停与js

javascript - Leaflet L.geoJSON 可拖动

php - 在 PHP 中解析 GeoJson 字符串

javascript - 为什么要在继承对象之外声明原型(prototype)函数?

javascript - 用圆形 SVG 绘制菱形刻在一组中

javascript - "Interpolate"不是一个函数

javascript - 将鼠标事件分配给 svg :text in d3. js

javascript - 如何在大型光栅图像上将 Leaflet flyTo() 与 unproject() 和 GeoJSON 数据一起使用?