D3.js で間違った GeoJSON レンダリングを修正する方法

D3.js で geoJSON データを視覚化しようとすると、次のような問題が発生することは珍しくありません。予想されるレンダリングと実際のレンダリングの間の差異。特定の問題の 1 つは、出力に意図した地理的フィーチャの代わりに大きな黒い四角形が表示される場合に発生します。

問題分析

質問で提供されたコードを検査すると、次のようになります。間違いが座標の巻き順にあることは明らかです。 D3.js は楕円体計算を利用するため、座標の特定の巻き順が必要です。残念ながら、geoJSON ファイルには「時計回り」と「反時計回り」の巻き順が混在しているため、正しくレンダリングされません。

解決策

これを修正するにはこの問題を解決するには、geoJSON ファイル内のすべての座標の巻き順が正しいことを確認する必要があります。これは、座標を並べ替えることによって手動で行うか、フィーチャを巻き戻すための便利な方法を提供する turf.js などのライブラリを使用することによって実現できます。

コード例

巻き順を修正する turf.rewind() メソッド:

var fixed = features.map(function(feature) {
  return turf.rewind(feature,{reverse:true});
});

追加の考慮事項

巻き順を修正すると黒い四角形の問題は解決しますが、D3.js の別の癖に注目する価値があります。 geoJSON 仕様とは異なり、D3.js では逆の巻き順 (時計回りの場合は反時計回り、その逆) が使用されます。その結果、適切なレンダリングを確保するには、巻き戻す前に巻き取り順序を逆にする必要がある場合があります。

視覚化の向上

巻き取り順序の修正に加えて、投影設定では、指定されたスペース内にフィーチャを適合させることで視覚化を強化できます。これは、fitSize メソッドを使用して特徴を拡大縮小および変換することで実現できます:

// Fit the features to the screen
var projection = d3.geoMercator().fitSize([width, height], features);

次の手順に従うことで、D3.js での geoJSON データの間違ったレンダリングを修正し、正確な視覚化を実現できます。目的の地理的特徴。