D3.js dibujando incorrectamente GeoJSON: el problema del orden de bobinado

Al intentar visualizar regiones rusas usando datos geoJSON, los programadores encontraron un problema donde D3.js dibuja un único rectángulo negro en lugar de los contornos del mapa deseado. Esta discrepancia surge de un problema con el orden de enrollado de las coordenadas en el archivo geoJSON.

Comprensión del orden de enrollado

Las coordenadas GeoJSON se pueden organizar en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj , que representa el interior o el exterior de una forma. La mayoría de las herramientas y validadores ignoran este orden, pero D3.js usa matemáticas elipsoidales, que requieren un bobinado correcto para evitar la creación de polígonos invertidos que cubren todo el mundo.

Identificar el problema

Al inspeccionar los caminos SVG, se hace evidente que algunos caminos están dibujados con precisión mientras que otros cubren todo el planeta excepto el espacio previsto. Esto se debe a que los datos contienen una combinación de giros en sentido horario y antihorario, lo que lleva a D3.js a tratar el polígono invertido como todo lo que hay en el planeta que no es la región objetivo.

Resolviendo el problema

Para resolver este problema, se deben reordenar las coordenadas. Una solución conveniente es utilizar la biblioteca turf.js:

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

Esto rebobina cada polígono para seguir el orden de bobinado correcto, según lo especificado en la especificación geoJSON. Sin embargo, D3.js usa el orden de bobinado opuesto, por lo que el parámetro inverso se establece en verdadero.

Ajustando la vista del mapa

Después de arreglar el orden de bobinado, se pueden realizar más ajustes Se pueden hacer cambios para mejorar la apariencia del mapa. Al agregar un método fitSize a la proyección, el mapa se puede escalar y traducir para lograr una vista más adecuada.