我正在制作一张显示中国各省的D3地图。我尝试了几种不同教程的混合使用,但是在将地图显示在使用python本地服务器的浏览器中时,我一直没有成功。
我可以看到地图信息已正确输入到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
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句