d3.js中的geochart

Question

我正在寻找一些指导或如何在d3.js中做一个地理图的例子。我需要像this one这样的东西在谷歌图表中，并转向d3.js，因为我需要一些自定义。到目前为止，我找到的最接近的d3.js示例是this，但那里的代码非常长，我希望能找到更简单的代码。

Answer 1

你在找一张全息地图吗？这是一个recent example in 28 lines of code。

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

如果你想展示世界地图，我也可以看看extended projections plugin的最新发展。这将添加许多有用的地图投影，特别是对于世界地图，如Winkel Tripel。下一版本的D3还将包括一些令人兴奋的新功能，例如任何投影的三维旋转(包括前向切割；尝试dragging this example)、adaptive resampling和改进的裁剪。

至于上色，你当然可以通过将“填充”样式重新定义为数据的函数，随心所欲地给地理要素上色。

Answer 2

出于对@mbostock和他的回答的应有的尊重，我想我应该为遇到这个问题的任何人添加一些额外的资源。

@Yaron Naveh提供的链接中的示例似乎是一个Mercator projection。你可以在d3.js API中找到更多关于D3.js的墨卡托投影设施的信息。@mbostock也很友好地为API中的每个投影创建了块/图(单击示例的投影缩略图)。下面是一个简单的墨卡托投影block/gist的链接。

关于“询问的艺术--你感觉如何？”link，下面是@mbostock所说的使用填充样式作为数据函数进行着色的一小段代码。在本例中，我简单地选择了JSON文件中国家名称的第一个字符的Unicode值，并使用"steelblue“(#4682B4 = 4620980)作为种子(您可能想要计算阴影/色调)从该值生成CSS颜色。

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); });
});

您可以在这里通过block/gist查看完整的示例。

(@mbostock --谢谢你这么棒的工具！)