Question

我正在制作一个世界的交互式地图可视化，用户应该能够放大一个国家，然后查看该国家的更多详细信息（例如，如果该国家是美国，则说明）。

截至目前，我有一个geoJSON文件用于世界各国的数据，另一个用于中国各省。问题是我需要将中国省地图放在中国在世界地图上的位置。即使两个地图的中国边界的形状相同，但缩放不是，而且中国地图的翻译也是一个问题。

如何确保中国地图与中国在世界地图上的位置相同？

最终结果应与此类似：http://techslides.com/demos/d3/us-zoom-county.html

但在这种情况下，所有数据都在一个geoJSON文件中，包含每个州的美国州和县。

如果有某种方法可以合并两个或多个geoJSON文件，这些文件非常棒，并且可能适用于我的情况。

如何在同一地图可视化中使用来自不同geoJSON文件的数据？

提前致谢！

Answer 1

我设法解决了问题，这比我想象的要容易。解决方案是首先计算中国的边界区域然后在那里绘制地图。以下是一些代码：

var projectionChina = d3.geoMercator();
var pathChina = d3.geoPath(projection);

g.append("g")
  .attr("class", "china")
  .attr("width", boundingArea.width)
  .attr("height", boundingArea.height)
  .selectAll("path")
    .data(data.geometries)
  .enter().append("path")
    .attr("d", pathChina);

其中boundingArea是封装中国边界的矩形。

希望这有助于某些人遇到同样的问题。

在D3.js地图可视化

1 个答案: