Question

This tutorial是用d3创建等值线的一个很好的介绍，但它的数据是以美国为中心的。我在哪里可以获得世界地图的相应数据？

我确定它在某个地方的文档中，但我找不到它。 This是我发现的最接近的，但是那里的一张世界地图明确表示不建议用于等值线。另外，

Answer 1

注意：此答案是针对d3的第2版编写的。版本3现已推出，它具有很棒的新功能，可以创建更好的几何分割并解决下面提到的填充问题。此外，用于设置投影_ 的界面可能 _在V3中已更改（不确定bc我还没有尝试过）。

有一个json文件可用于整个世界，你可以将它等效地渲染到us-states.json coropleth（使用Albers等面积投影） - 假设你理解（并且可以）阿尔伯斯投影的世界地图看起来像this，这并不是大多数人认识世界地图的方式。

首先，您需要json data for the entire world，这与world mercator projection example使用的数据相同。

然后，您需要使用自定义的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和数据以找出原因。

如何使用d3创建世界的等值线？

1 个答案: