Question

我正在寻找一些指导或示例如何在d3.js中执行geochart。我需要在谷歌图表中使用类似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的下一个版本还将包括一些令人兴奋的新功能，例如任何投影的三维旋转（包括antemeridian切割;尝试dragging this example），adaptive resampling和改进剪裁。

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

Answer 2

对@mbostock和他的答案充分尊重，我想我会为遇到这个问题的人添加一些额外的资源。

@Yaron Naveh提供的链接中的示例似乎是Mercator projection。您可以在d3.js API中找到有关d3.js'Mercator投影设施的更多信息。 @mbostock也非常友好地为API中的每个投影创建块/要点（单击示例的投影缩略图图像）。以下是简单墨卡托投影的链接block / gist。

关于“要求的艺术 - 你感觉如何？”链接，这里有一个小代码，可以使用@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 - 感谢您使用这么棒的工具！）

d3.js中的geochart

2 个答案: