D3.jsのマップビジュアライゼーションで2つの別々のgeoJSONファイルのデータを使用

Question

私は、世界をインタラクティブマップで視覚化しています。ユーザーはその国を拡大して、その国の詳細を見ることができます。国が米国の場合は記載）。

今のところ、世界の国々のデータ用に1つのgeoJSONファイルがあり、中国の地域用に1つのgeoJSONファイルがあります。問題は、私は中国の地図が中国の世界地図の上に置かれる必要があるということです。そして、中国の国境の形状は両方の地図で同じですが、拡大縮小はそうではなく、中国地図の翻訳にも問題があります。

中国の地図が中国の地図と同じ場所に配置されるようにするにはどうすればよいですか？

最終結果は次のように何かする必要があります：http://techslides.com/demos/d3/us-zoom-county.html

しかし、その場合には、すべてのデータは、各状態のための米国の州や郡の両方を含む、単一にGeoJSONファイルです。

2つ以上のgeoJSONファイルをマージする方法がありますが、これは私の場合にはうまくいくでしょう。

同じマップビジュアライゼーションで異なるgeoJSONファイルのデータを使用する方法のアイデアはありますか？

ありがとうございます！

Answer 1

私は問題を解決することができたし、思ったよりも簡単でした。解決策は、最初に中国の境界領域を計算し、その後そこにマップを描画することでした。

boundingArea

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

は、中国との国境をカプセル化する長方形である：ここではいくつかのコードです。

これは、同じ問題を抱えている人に役立ちます。