我正在寻找一些指导或示例如何在 d3.js 中制作地理图表。我在谷歌图表中需要类似的东西,并转向 d3.js,因为我需要一些定制。到目前为止,我找到的最接近的 d3.js 示例是这个,但那里的代码很长,我希望能找到更简单的东西。
2 回答
您在寻找等值线图吗?这是最近的 28 行代码示例。
此示例使用默认投影d3.geo.albersUsa,它是美国的复合投影,包括阿拉斯加、夏威夷和波多黎各。如果你想改变可见区域,你可能还想改变投影;d3.geo.albers适合 choropleth 地图,因为它是等面积的。阿尔伯斯投影允许您设置原点,以便您可以专注于全局的特定部分,并且所有投影都允许您指定比例并平移以在屏幕上定位地图。
如果您想显示世界地图,我还想看看扩展投影插件的持续开发。这增加了许多有用的地图投影,特别是对于世界地图,例如Winkel Tripel。D3 的下一个版本还将包括一些令人兴奋的新功能,例如任何投影的 3D 旋转(包括子午线切割;尝试拖动此示例)、自适应重采样和改进的裁剪。
至于为等值线着色,您当然可以通过将“填充”样式重新定义为数据的函数来为地理特征着色。
在充分尊重@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 - 感谢您提供如此出色的工具!)