我正在制作一张显示中国各省的 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/