Question

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

2017-07-05

598

javascript d3.js geojson

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

到目前为止，我有一个 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 是封装中国边界的矩形。

希望这能帮助遇到同样问题的人。