Comment corriger le rendu GeoJSON incorrect dans D3.js

Lorsque vous essayez de visualiser des données GeoJSON dans D3.js, il n'est pas rare de rencontrer écarts entre le rendu attendu et le rendu réel. Un problème particulier survient lorsque la sortie affiche un grand rectangle noir au lieu des caractéristiques géographiques souhaitées.

Analyse du problème

Lors de l'inspection du code fourni dans la question, il devient Il est évident que l'erreur réside dans l'ordre d'enroulement des coordonnées. D3.js utilise des mathématiques ellipsoïdales, qui nécessitent un ordre d'enroulement spécifique pour les coordonnées. Malheureusement, le fichier geoJSON contient un mélange d'ordres d'enroulement "dans le sens des aiguilles d'une montre" et "dans le sens inverse des aiguilles d'une montre", ce qui entraîne un rendu incorrect.

Solution

Pour corriger ce problème problème, il est nécessaire de s'assurer que toutes les coordonnées du fichier geoJSON ont le bon ordre d'enroulement. Ceci peut être réalisé manuellement en réorganisant les coordonnées ou en utilisant une bibliothèque comme turf.js, qui fournit une méthode pratique pour rembobiner les fonctionnalités.

Exemple de code

Utilisation de l' Méthode turf.rewind() pour corriger l'ordre d'enroulement :

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

Considérations supplémentaires

Bien que la correction de l'ordre d'enroulement résolve le problème du rectangle noir, il convient de noter une autre bizarrerie dans D3.js. Contrairement à la spécification geoJSON, D3.js utilise l'ordre d'enroulement opposé (dans le sens inverse des aiguilles d'une montre pour le sens des aiguilles d'une montre et vice versa). Par conséquent, il peut être nécessaire d'inverser l'ordre d'enroulement avant de rembobiner pour garantir un rendu correct.

Visualisation améliorée

En plus de corriger l'ordre d'enroulement, d'ajuster le les paramètres de projection peuvent améliorer la visualisation en ajustant les éléments dans l'espace désigné. Ceci peut être réalisé en utilisant la méthode fitSize pour mettre à l'échelle et traduire les fonctionnalités :

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

En suivant ces étapes, vous pouvez corriger le rendu incorrect des données geoJSON dans D3.js et obtenir une visualisation précise de les caractéristiques géographiques souhaitées.