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

Question

使用 D3 V6 创建 map ，按县显示教育程度。我有一个 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);
     })

我还应该提到在 .counties 中添加“fill” CSS 中的类也会产生“溢出”。我检查了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 的插件或工具来修复数据的缠绕。 ，您可以使用 "rewind"你的形状 - 尽管你应该使用 reverse: true 选项。