12

本教程是使用 d3 创建 choropleths 的一个很好的介绍，但它的数据是以美国为中心的。我在哪里可以获得世界地图的相应数据？

我确定它在某个地方的文档中，但我找不到它。这是我找到的最接近的，但那里的一张世界地图明确表示不建议将其用于 choropleths。还，

4

1 回答 1

9

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

有一个适用于整个世界的 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()值可以调整以获得不同的结果。

南极洲有一个问题，由于这种投影的性质，它会“翻转”并且不是封闭的形状，因此它的填充覆盖了整个世界。您要么必须将其从 json 中删除，要么不对其应用填充。

同样由于某种原因，当我尝试此操作时，巴西（以及其他几个）没有正确渲染。不知道为什么。您必须检查 svg 和数据才能找出原因。

于 2012-10-31T04:31:42.907 回答