D3.js ne dessine pas correctement GeoJSON : le problème de l'ordre d'enroulement

Lors de la tentative de visualisation des régions russes à l'aide de données geoJSON, les programmeurs ont rencontré un problème où D3.js dessine un seul rectangle noir au lieu des contours de carte souhaités. Cet écart résulte d'un problème avec l'ordre d'enroulement des coordonnées dans le fichier geoJSON.

Comprendre l'ordre d'enroulement

Les coordonnées GeoJSON peuvent être disposées dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre. , représentant l'intérieur ou l'extérieur d'une forme. La plupart des outils et des validateurs ignorent cet ordre, mais D3.js utilise des mathématiques ellipsoïdales, qui nécessitent un enroulement correct pour éviter de créer des polygones inversés couvrant la totalité du globe.

Identifier le problème

Lors de l'inspection des chemins SVG, il devient évident que certains chemins sont tracés avec précision tandis que d'autres couvrent la planète entière, à l'exception de l'espace prévu. En effet, les données contiennent une combinaison d'enroulements dans le sens des aiguilles d'une montre et dans le sens inverse, ce qui conduit D3.js à traiter le polygone inversé comme tout ce qui se trouve sur la planète qui n'est pas la région cible.

Résoudre le problème

Pour résoudre ce problème, les coordonnées doivent être réorganisées. Une solution pratique consiste à utiliser la bibliothèque turf.js :

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

Cela rembobine chaque polygone pour suivre l'ordre d'enroulement correct, tel que spécifié par la spécification geoJSON. Cependant, D3.js utilise l'ordre d'enroulement opposé, donc le paramètre reverse est défini sur true.

Ajustement de la vue cartographique

Après avoir corrigé l'ordre d'enroulement, d'autres ajustements peuvent être réalisés pour améliorer l'apparence de la carte. En ajoutant une méthode fitSize à la projection, la carte peut être mise à l'échelle et traduite pour obtenir une vue plus appropriée.