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

Javascript 在D3.js地图可视化中使用来自两个独立geoJSON文件的数据,javascript,d3.js,geojson,Javascript,D3.js,Geojson,我正在制作一个世界的交互式地图可视化,用户应该能够放大一个国家,然后查看该国的更多细节(例如,如果该国是美国,则显示该国) 到目前为止,我有一个geoJSON文件用于世界各国的数据,另一个用于中国各省的数据。问题是我需要把中国的省份地图放在中国在世界地图上的位置。尽管两张地图的中国边界形状相同,但缩放比例不同,这也是中国地图翻译的一个问题 我如何确保中国地图与世界地图上的中国放在同一位置 最终结果应该与此类似: 但在这种情况下,所有数据都在一个geoJSON文件中,包含美国各州和每个州的县 如果

我正在制作一个世界的交互式地图可视化,用户应该能够放大一个国家,然后查看该国的更多细节(例如,如果该国是美国,则显示该国)

到目前为止,我有一个geoJSON文件用于世界各国的数据,另一个用于中国各省的数据。问题是我需要把中国的省份地图放在中国在世界地图上的位置。尽管两张地图的中国边界形状相同,但缩放比例不同,这也是中国地图翻译的一个问题

我如何确保中国地图与世界地图上的中国放在同一位置

最终结果应该与此类似:

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

如果有某种方法可以合并两个或多个geoJSON文件,那将是非常棒的,在我的例子中可能会起作用

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


提前谢谢

我设法解决了这个问题,而且比我想象的要容易。解决办法是首先计算中国的边界面积,然后在那里绘制地图。以下是一些代码:

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

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