如何修复 D3.js 中不正确的 GeoJSON 渲染

尝试在 D3.js 中可视化 geoJSON 数据时，遇到这种情况并不少见预期渲染与实际渲染之间的差异。当输出显示一个大的黑色矩形而不是预期的地理特征时，就会出现一个特殊问题。

问题分析

在检查问题中提供的代码后，它变成显然，错误在于坐标的缠绕顺序。 D3.js 使用椭球数学，这需要特定的坐标缠绕顺序。不幸的是，geoJSON 文件包含“顺时针”和“逆时针”缠绕顺序的混合，导致渲染不正确。

解决方案

纠正此问题问题，有必要确保 geoJSON 文件中的所有坐标都具有正确的缠绕顺序。这可以通过重新排序坐标或使用像 turf.js 这样的库来手动实现，它提供了一种方便的倒带功能的方法。

代码示例

利用turf.rewind() 方法来纠正缠绕顺序：

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

其他注意事项

虽然更正缠绕顺序可以解决黑色矩形问题，但值得注意的是 D3.js 中的另一个怪癖。与 geoJSON 规范不同，D3.js 使用相反的缠绕顺序（逆时针为顺时针，反之亦然）。因此，可能需要在倒带之前反转缠绕顺序以确保正确渲染。

改进的可视化

除了固定缠绕顺序之外，还调整投影设置可以通过将要素拟合到指定空间内来增强可视化效果。这可以通过使用 fitSize 方法来缩放和平移特征来实现：

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

通过以下步骤，您可以纠正D3.js中geoJSON数据的错误渲染，并实现准确的可视化所需的地理特征。