6

我正在寻找一些指导或示例如何在 d3.js 中制作地理图表。我在谷歌图表中需要类似的东西，并转向 d3.js，因为我需要一些定制。到目前为止，我找到的最接近的 d3.js 示例是这个，但那里的代码很长，我希望能找到更简单的东西。

4

2 回答 2

9

您在寻找等值线图吗？这是最近的 28 行代码示例。

此示例使用默认投影d3.geo.albersUsa，它是美国的复合投影，包括阿拉斯加、夏威夷和波多黎各。如果你想改变可见区域，你可能还想改变投影；d3.geo.albers适合 choropleth 地图，因为它是等面积的。阿尔伯斯投影允许您设置原点，以便您可以专注于全局的特定部分，并且所有投影都允许您指定比例并平移以在屏幕上定位地图。

如果您想显示世界地图，我还想看看扩展投影插件的持续开发。这增加了许多有用的地图投影，特别是对于世界地图，例如Winkel Tripel。D3 的下一个版本还将包括一些令人兴奋的新功能，例如任何投影的 3D 旋转（包括子午线切割；尝试拖动此示例）、自适应重采样和改进的裁剪。

至于为等值线着色，您当然可以通过将“填充”样式重新定义为数据的函数来为地理特征着色。

于 2012-09-29T14:52:42.237 回答
2

在充分尊重@mbostock 和他的回答的情况下，我想我会为遇到这个问题的任何人添加一些额外的资源。

@Yaron Naveh 提供的链接中的示例似乎是Mercator projection。您可以在d3.js API中找到有关 d3.js 的墨卡托投影工具的更多信息。@mbostock 也很友好地为 API 中的每个投影创建块/要点（单击投影缩略图以获取示例）。这是一个简单的墨卡托投影块/要点的链接。

关于“提问的艺术——你感觉如何？” 链接，这里有一些代码与@mbostock 所说的有关使用填充样式作为数据函数进行着色的内容。在这个例子中，我只是在 JSON 文件中为国家名称的第一个字符选择 unicode 值，并使用“steelblue”（#4682B4 = 4620980）作为种子（你可能会想要计算色调/色调）。

d3.json("readme.json", function(collection) {
  d3.select("svg").selectAll("path")
      .data(collection.features)
    .enter().append("path")
      .attr("d", d3.geo.path().projection(d3.geo.mercator()))
      .style("fill", function(d) { return '#'+Math.floor(d.properties.name.charCodeAt(0)/100*4620980).toString(16); });
});

您可以在此处查看完整示例作为块/要点。

（@mbostock - 感谢您提供如此出色的工具！）

于 2012-11-20T21:55:20.023 回答