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 回答