在D3.js地图可视化中使用来自两个独立geoJSON文件的数据

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是封装中文边框的矩形。

希望这对有同样问题的人有所帮助。