D3 V6 und JavaScript - GeoJSON-Füllung wird außerhalb des Pfads „verschüttet“ [Duplikat]

Question

Erstellen einer Karte mit D3 V6, die den Bildungsstand nach Landkreisen anzeigt. Ich habe eine Grafschaften.topojson und csvData.csv, die geladen werden:

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);

und in einer Rückruffunktion, die Variablen csvDataund zugewiesen ist counties. Die countieswerden dann übersetzt mit:

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

Die csvDataVerknüpfung wird mit den County-Daten verknüpft, und die Verknüpfung wird console.log(joinedCounties)innerhalb der Rückruffunktion bestätigt setEnumerationUnits()(wobei colorScaledie Quantilskala auf einem Array basiert, das aus dem csvDataund erstellt wurde, mapist das SVGElement:

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);
     })

Ich sollte auch erwähnen, dass das Hinzufügen von "Füllen" zur .countiesKlasse in CSS auch das "Verschütten" erzeugt. Ich habe den Topojson in QGIS und Pro überprüft, die beide normal erscheinen. Ich habe auch eine zweite Datenquelle mit den gleichen Ergebnissen ausprobiert. Hier ist das Ergebnis:

So sieht es ohne Styling aus, ohne Füllung, nur Strich in CSS definiert:

Ich erhalte keine Fehler in der Konsole. Ich freue mich über jede Hilfe, die jemand geben kann! Vielen Dank!

Vielen Dank! Die turf.rewind hat funktioniert !!

Folgendes habe ich hinzugefügt, damit es funktioniert (nach der Installation der Rasenbibliothek):

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

Answer 1

Einer oder mehrere Ihrer GeoJSON-Einträge sind falsch herum. Die Werte sind korrekt, aber in der falschen Reihenfolge. d3-geoerwartet im Allgemeinen, dass die GeoJSON-Funktionen im Uhrzeigersinn ausgeführt werden :

Sphärische Polygone erfordern auch eine Konvention der Wicklungsreihenfolge, um zu bestimmen, welche Seite des Polygons die Innenseite ist: Der Außenring für Polygone, die kleiner als eine Halbkugel sind, muss im Uhrzeigersinn sein, während der Außenring für Polygone, die größer als eine Halbkugel sind, gegen den Uhrzeigersinn sein muss.

Sie können das Wickeln Ihrer Daten mit einem Plugin oder einem ähnlichen Tool korrigieren turf, mit dem Sie Ihre Formen "zurückspulen" können - obwohl Sie die reverse: trueOption verwenden sollten.