So beheben Sie fehlerhaftes GeoJSON-Rendering in D3.js

Beim Versuch, GeoJSON-Daten in D3.js zu visualisieren, ist dies nicht ungewöhnlich Abweichungen zwischen der erwarteten und der tatsächlichen Darstellung. Ein besonderes Problem entsteht, wenn in der Ausgabe ein großes schwarzes Rechteck anstelle der beabsichtigten geografischen Merkmale angezeigt wird.

Problemanalyse

Bei der Überprüfung des in der Frage bereitgestellten Codes wird Folgendes angezeigt Es ist offensichtlich, dass der Fehler in der Wicklungsreihenfolge der Koordinaten liegt. D3.js nutzt Ellipsoid-Mathematik, die eine bestimmte Wicklungsreihenfolge für Koordinaten erfordert. Leider enthält die GeoJSON-Datei eine Mischung aus Wicklungsreihenfolgen „im Uhrzeigersinn“ und „gegen den Uhrzeigersinn“, was zu einer falschen Darstellung führt.

Lösung

Um dies zu beheben Bei diesem Problem muss sichergestellt werden, dass alle Koordinaten in der geoJSON-Datei die richtige Wickelreihenfolge haben. Dies kann manuell durch Neuordnung der Koordinaten oder durch Verwendung einer Bibliothek wie turf.js erreicht werden, die eine praktische Methode zum Zurückspulen von Features bietet.

Codebeispiel

Verwendung der turf.rewind()-Methode zum Korrigieren der Wickelreihenfolge:

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

Zusätzliche Überlegungen

Während die Korrektur der Wickelreihenfolge das Problem mit den schwarzen Rechtecken behebt, ist es erwähnenswert, eine weitere Eigenart in D3.js zu beachten. Im Gegensatz zur geoJSON-Spezifikation verwendet D3.js die umgekehrte Wicklungsreihenfolge (gegen den Uhrzeigersinn für im Uhrzeigersinn und umgekehrt). Daher kann es erforderlich sein, die Wickelreihenfolge vor dem Zurückspulen umzukehren, um eine ordnungsgemäße Wiedergabe sicherzustellen.

Verbesserte Visualisierung

Zusätzlich zum Festlegen der Wickelreihenfolge ist das Anpassen der Projektionseinstellungen können die Visualisierung verbessern, indem sie die Merkmale in den vorgesehenen Raum einpassen. Dies kann mithilfe der fitSize-Methode zum Skalieren und Übersetzen der Features erreicht werden:

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

Durch Befolgen dieser Schritte können Sie die falsche Darstellung von GeoJSON-Daten in D3.js korrigieren und eine genaue Visualisierung von erreichen die gewünschten geografischen Merkmale.