javascript - D3 中的 Choropleth 地图现在失败了

Question

我有一个网页，它读取加利福尼亚县的 GeoJSON 文件，然后根据 HTML 页面上的下拉选择在 SVG 控件上创建一个等值线图。它在 11 月（22 日？）工作，但是当我几天前查看它时，它不再工作了。我无法确定它破裂的时间。该地图是加州理发和美容委员会的许可证。许可证信息存储在单独的 JSON 文件中。

当地图被渲染时，它应该使用 D3 GeoProjection v2 库在加利福尼亚地图上为县绘制黑色边框。然后根据所选类型的许可证数量从一个县到另一个县填充多边形。

当前的错误是整个 SVG 元素被着色为最高计数颜色，金橙色的阴影，文图拉县被正确着色，但标记为圣地亚哥。这些县之所以重要，是因为它们是数据集中颜色值的最后两个。首先是圣地亚哥，然后是文图拉。文图拉县以外的地区被标记为文图拉县。

这是代码的主要部分：

    async function drawCountys(projection){
        //If lines already exist remove them
        d3.selectAll("g")
            .remove();
    
        counties = await d3.json("scripts/California_Counties.geojson");
    
        d3.select("#bbc_ca").append("g")
            .selectAll("path")
            .data(counties.features)
            .enter()
            
            .append("path")
    
            .attrs({
                    d: d3.geoPath().projection(projection),
                    stroke: "#000000",
                    fill:(d)=> {return whichColor(d.properties.id, compareField);}
            })
            .append("title")
                .text(function(d) 
                //Add a template to serve as a tooltip. Another method is to add a mouseover and mouseout event listener
                    {   let countyID = d.properties.id;
                        //Matches the value of the drop down
                        return `County: ${d.properties.Name}
    Total: ${getValue(countyID, "All").toLocaleString()}
    Barber: ${getValue(countyID, "Barber").toLocaleString()}
    Cosmetologist: ${getValue(countyID, "Cosmetologist").toLocaleString()}
    Electrologist: ${getValue(countyID, "Electrologist").toLocaleString()}
    Esthetician: ${getValue(countyID, "Esthetician").toLocaleString()}
    Manicurist: ${getValue(countyID, "Manicurist").toLocaleString()}
    Establishment: ${getValue(countyID, "Establishment").toLocaleString()}
    Mobile Unit: ${getValue(countyID, "Mobile Unit").toLocaleString()}`;
                    });
        }

任何有关修复或故障排除的帮助，真正的任何建设性意见，将不胜感激。

标签： javascripthtmld3.js