D3 V6 和 JavaScript - GeoJSON 填充在路径之外 "spilling"

Question

正在使用 D3 V6 创建地图，按县显示受教育程度。我有一个 counties.topojson 和 csvData.csv 已加载：

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

并在分配给变量 csvData 和 counties 的回调函数中。然后使用 counties 翻译：

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

将csvData加入到县数据中，并在console.log(joinedCounties)中确认加入，在回调函数中调用setEnumerationUnits()（其中colorScale是分位数基于从 csvData 和 map 创建的数组缩放是 SVG 元素：

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

我还应该提到在 CSS 中的 .counties class 中添加“填充”也会创建“溢出”。我检查了QGIS和Pro中的topojson，都显示正常。我还尝试了具有相同结果的第二个数据源。这是结果：

这是在 CSS 中定义的没有样式、没有填充、只有描边的样子：

我在控制台中没有收到任何错误。我感谢任何人可以提供的帮助！谢谢！

谢谢！ turf.rewind 成功了！！

这是我为使其正常工作而添加的内容（在安装 turf 库之后）：

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

Answer 1

您的一个或多个 GeoJSON 条目是错误的。这些值是正确的，但顺序错误。 d3-geo 一般期望 GeoJSON features to be clockwise:

Spherical polygons also require a winding order convention to determine which side of the polygon is the inside: the exterior ring for polygons smaller than a hemisphere must be clockwise, while the exterior ring for polygons larger than a hemisphere must be anticlockwise.

您可以使用 turf, which you can use to "rewind" 您的形状之类的插件或工具修复数据的缠绕 - 尽管您应该使用 reverse: true 选项。

D3 V6 和 JavaScript - GeoJSON 填充在路径之外 "spilling"

D3 V6 and JavaScript - GeoJSON fill is "spilling" outside of path

javascript

geojson

d3.js