D3.js GeoJSON 描画の問題の修正: 巻き順を修正するには?

D3.js が GeoJSON を間違って描画する: ワインディング順序の問題

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

巻き順について

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

問題の特定

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

問題の解決

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

<code class="js">var fixed = features.map(function(feature) {
    return turf.rewind(feature,{reverse:true});
});</code>

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

マップ ビューの調整

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

以上がD3.js GeoJSON 描画の問題の修正: 巻き順を修正するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。