javascript - D3 V6 和 JavaScript - GeoJSON 填充是路径外的 "spilling"

Question

这个问题在这里已经有了答案:





D3.js Drawing geojson incorrectly

(2 个回答)


1年前关闭。




使用 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 中添加“填充”。 CSS 中的类也会造成“溢出”。我已经检查了 QGIS 和 Pro 中的 topojson，它们看起来都很正常。我还尝试了具有相同结果的第二个数据源。
结果如下:

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

我在控制台中没有收到任何错误。我感谢任何人都可以提供的帮助!谢谢!
谢谢! turf.rewind 工作!
这是我添加使其工作的内容(安装草皮库后):

        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选项。