D3.js が GeoJSON を間違って描画する: 巻き順の問題

geoJSON データを使用してロシア地域を視覚化しようとしたときに、プログラマーが問題に遭遇しましたここで、D3.js は、目的の地図の輪郭の代わりに単一の黒い四角形を描画します。この不一致は、geoJSON ファイル内の座標の巻き順の問題から発生します。

巻き順について

GeoJSON 座標は時計回りまたは反時計回りのいずれかの順序で配置できます。 、形状の内側または外側を表します。ほとんどのツールとバリデーターはこの順序を無視しますが、D3.js は楕円体の計算を使用するため、地球全体を覆う反転ポリゴンの作成を避けるために正しい巻き上げが必要です。

問題の特定

SVG パスを検査すると、正確に描画されているパスもあれば、意図した空間を除いて惑星全体をカバーしているパスもあることは明らかです。これは、データに時計回りと反時計回りの両方の巻きの組み合わせが含まれているため、D3.js は反転した多角形を地球上のターゲット領域以外のものすべてとして扱うことになります。

問題の解決 ]

この問題を解決するには、座標を並べ替える必要があります。便利な解決策は、turf.js ライブラリを利用することです。

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

これにより、geoJSON 仕様で指定されている正しい巻き順に従って各ポリゴンが巻き戻されます。ただし、D3.js では巻き順が逆なので、reverse パラメータを true に設定します。

マップビューの調整

巻き順を固定した後、さらに調整します。マップの外観を向上させるために作成できます。 fitSize メソッドを投影に追加することで、マップを拡大縮小および変換して、より適切なビューを実現できます。