我正在使用世界的等值线图(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>
可能是什么原因?