d3.js中的世界地理位置图不起作用

时间:2016-11-23 08:22:14

标签: javascript d3.js geospatial choropleth geomap

我正在使用世界的等值线图(d3.js)来显示各个国家的人口。 我试过这个教程:
https://d3-geomap.github.io/map/choropleth/world/

CSV文件从这里下载:
http://data.worldbank.org/indicator/SP.POP.TOTL

还从这里下载了d3-geomap库:
https://d3-geomap.github.io/download/d3-geomap-1.0.2.zip

但浏览器中没有显示任何输出。

以下是代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Choropleth Map - World</title>

   </head>

    <body>
        <div id="map"></div>

        <script>
            var format = function(d) {
            d = d / 1000000;
            return d3.format(',.02f')(d) + 'M';
        }

            var map = d3.geomap.choropleth()
                .geofile('d3-geomap/topojson/world/countries.json')
                .colors(colorbrewer.YlGnBu[9])
                .column('YR2010')
                .format(format)
                .legend(true)
                .unitId('Country Code');

            d3.csv('d3-geomap/sp.pop.totl.csv', function(error, data) {
                d3.select('#map')
                    .datum(data)
                    .call(map.draw, map);
            });
        </script>


        <script src="d3-geomap/jquery.js"></script>   <!-- Jquery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>  


    </body>
</html>

可能是什么原因?

0 个答案:

没有答案