D3 V6 e JavaScript - o preenchimento GeoJSON está “derramando” fora do caminho [duplicado]

Question

Criação de um mapa usando D3 V6, mostrando o nível de escolaridade por município. Eu tenho um counties.topojson e csvData.csv que estão carregados:

var promises = [];
promises.push(d3.csv("data/csvData.csv")); //load attributes from csv
promises.push(d3.json("data/counties.topojson")); //load background spatial data

Promise.all(promises).then(callback);

e em uma função de retorno de chamada atribuída às variáveis csvDatae counties. Em countiesseguida, são traduzidos usando:

miCounties = topojson.feature(counties, counties.objects.collection).features;

O csvDataé unido aos dados do condado, e a junção é confirmada em console.log(joinedCounties), dentro da função de retorno de chamada setEnumerationUnits()é chamada (onde colorScaleé a escala de quantil baseada em uma matriz criada a partir de csvDatae mapé o SVGelemento:

function setEnumerationUnits(joinedCounties,map,path,colorScale){
var counties = map.selectAll(".counties")
    .data(joinedCounties)
    .enter()
    .append("path")
    .attr("class", function(d){
        return "counties " + d.properties.NAME;
    })
    .attr("d", path)
    .style("fill", function(d) {
        return choropleth(d.properties, colorScale);
     })

Devo também mencionar que adicionar "preencher" à .countiesclasse em CSS também cria o "derramamento". Eu verifiquei o topojson no QGIS e Pro, que parecem normais. Também tentei uma segunda fonte de dados com os mesmos resultados. Aqui está o resultado:

Aqui está o que parece sem estilo, sem preenchimento, apenas traçado definido em CSS:

Não recebo nenhum erro no console. Agradeço qualquer ajuda que alguém possa dar! Obrigado!

Obrigado! O turf.rewind funcionou !!

aqui está o que eu adicionei para fazer funcionar (após instalar a biblioteca turf):

        miCounties.forEach(function(feature){
        feature.geometry = turf.rewind(feature.geometry, {reverse:true});

Answer 1

Uma ou mais entradas do GeoJSON estão ao contrário. Os valores estão corretos, mas estão na ordem errada. d3-geogeralmente espera que os recursos do GeoJSON estejam no sentido horário :

Polígonos esféricos também exigem uma convenção de ordem de enrolamento para determinar qual lado do polígono é o interior: o anel externo para polígonos menores que um hemisfério deve ser no sentido horário, enquanto o anel externo para polígonos maiores que um hemisfério deve ser anti-horário.

Você pode corrigir o enrolamento de seus dados usando um plugin ou ferramenta semelhante turf, que pode ser usada para "retroceder" suas formas - embora você deva usar a reverse: trueopção.