注意:此答案是针对d3的第2版编写的.版本3现已推出,它具有很棒的新功能,可以创建更好的几何分割并解决下面提到的填充问题.此外,用于设置投影_的界面可能在V3中已经改变(不确定bc我还没试过).
有一个json文件可供整个世界使用,您可以将它等效地渲染到us-states.json coropleth(使用Albers等面积投影) - 假设您理解(并且可以)Albers投影的事实世界地图看起来像这样,这并不是大多数人认识世界地图的方式.
首先,您需要整个世界的json数据,这与世界墨卡托投影示例使用的数据相同.
然后,您需要使用自定义的Albers投影渲染世界json数据:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Mercator Projection</title>
<style>
path {
fill: #ccc;
stroke: #fff;
}
</style>
<svg width="960" height="500"></svg>
<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
<script type="text/javascript">
d3.json("world-countries.json", function(collection) {
d3.select("svg").selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("d", d3.geo.path().projection(
d3.geo.albers()
.parallels([10, 80])
.origin([0,40])
.translate([500,250])
.scale(100)
));
});
</script>
origin(),parallels(),translate(),和scale()值可以调整,以得到不同的结果.
Antartica存在一个问题 - 由于这种投影的性质 - 被"翻转"并且不是封闭的形状,所以它的填充覆盖了整个世界.您必须从json中删除它,或者不对它应用填充.
还有一些原因,当我尝试这个时,巴西(以及其他几个)没有得到正确的渲染.不知道为什么.您必须检查svg和数据以找出原因.
| 归档时间： |
|
| 查看次数： |
5719 次 |
| 最近记录： |