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

Question

I am making an interactive map visualization of the world, where the user should be able to zoom in on a country and then see more details of that country (for example states if the country is the US).

As of now, I have one geoJSON file for the data of the countries in the world and another one for the provinces of China. The problem is that I need to have the China province map placed where China is on the world map. And even though the shape of the Chinese border is the same for the both maps, the scaling is not and it is also a problem with the translation of the China map.

How can I make sure that the map over China gets placed in the same place as China is on the world map?

The end result should be something similar to this: http://techslides.com/demos/d3/us-zoom-county.html

But in that case all the data is in a single geoJSON file, containing both US states and counties for each state.

If there is some way to merge two or more geoJSON files that would be awesome and would probably work in my case.

Any ideas of how to use data from different geoJSON files in the same map visualization?

Thanks in advance!

Answer 1

I managed to solve the problem and it was easier than I thought. The solution was to first calculate the bounding area of china then to draw the map there. Here are some code:

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);

Where boundingArea is the rectangle that encapsulates the Chinese border.

Hope this helps some one with the same problem.