Leaflet choropleth-除非悬停，否则不会显示geoJSON样式颜色

Question

我正在使用geoJSON基础层和Leaflet.js开发交互式的十字形地图，并使用从Socrata API端点提取的JSON数据对多边形进行符号化。 它基于此处发布的Leaflet.js choropleth示例。

我为一个问题感到困惑-当我使用最初属于JSON数据（例如pop）的属性为geoJSON多边形上色（即，设置样式）时，多边形颜色会在地图加载时加载。 但是，当我使用附加到geoJSON图层的属性（例如，估计值）对geoJSON多边形进行样式设置时，多边形颜色不会在地图加载时加载，而只会在我将鼠标悬停在每个多边形上时才会显示。 我的实时地图可以在这里查看。

这是相关的代码，任何人都可以看到我的问题吗？ 由于我刚开始学习JavaScript，因此我想我缺少一些简单的语法或程序顺序规则，这些规则或规则阻止了Leaflet贴图根据附加属性为多边形着色。 我重新排列了代码的顺序并更改了许多内容，但一次又一次地得到相同的结果。 非常感谢您帮助新手学习JavaScript！

//Initiate geojson variable so listeners can access
var geojson;

//Add TopoJSON layer and append SODA data to symbolize polygons

//Use d3.js to pull in TopoJSON, convert to geoJSON, and add to Leaflet map
d3.json("hrabasetopo.json", function(error, topology) {
    var collection = topojson.feature(topology, topology.objects.layer1);
    var hraData = [collection];

    //Pull summary data from SODA

    //Variable to select desired indicator
    var where = "$where=indicator='uninsure'";
    //Variable to order HRA and zip by VID to match order of features in geoJSON base
    var order = "&$order=vid";
    //Variable to concatenate queries with URL
    var url = "http://data.kingcounty.gov/resource/ajpg-dges.json?"+where+order;
    //jQuery GET request to pull data from SODA and feed to callback function with geoJSON
    $.get(url, 
    function(soda) {
        //Output SODA JSON and hra base geoJSOn to external function
        symbolize(soda);
        }, 
    "json");    

    //Function to append SODA data to TopoJSON converted to geoJSON
    function symbolize(soda) {

         //Loop to copy all of SODA JSON properties to HRA base geoJSON
         for (var i = 0; i<hraData[0].features.length; i++) {
            hraData[0].features[i].properties.estimate = Number(soda[i].estimate);
        }
    };

    //Get color depending on selected estimate
    function getColor(d) {
        return d > 20.1 ? '#e31a1c' :
               d > 16.2 ? '#fd8d3c' :
               d > 11.3 ? '#fecc5c' :
                           '#ffffb2';
    }

    //Incorporate getColor function into overall style function for HRA layer
    function style(feature) {
        return {
            weight: 1,
            opacity: 1,
            color: 'white',
            dashArray: '5',
            fillOpacity: 0.8,
            fillColor: getColor(feature.properties.estimate)
        };
    }

    //Add hraData as geoJSON layer to Leaflet map
    geojson = L.geoJson(hraData, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(map);

})

Answer 1

我自己想通了！ 对我而言，学习JavaScript的一个具有挑战性的方面是习惯于异步程序流，因为我习惯的所有统计软件编码语言（Stata，R，SAS等）都使用同步编程。 我的问题是，在调用来自API端点的JSON数据并将其附加到我的geoJSON层之前，我没有强迫Leaflet.js映射等待加载。 解决方案是将地图设置函数包装在一个名为mapSetup的大函数中，并使用jqXHR Object .done方法，如以下代码所示：

    //jQuery GET request to pull data from SODA and feed to callback function with geoJSON
        $.get(url) 
            .done(function(soda) {
            //Output SODA JSON and hra base geoJSOn to external function
            symbolize(soda);        
            })
            .done(function() {
            mapSetup();
            }); 

    //Function to append SODA data to TopoJSON converted to geoJSON
    function symbolize(soda) {

        //Loop to copy all of SODA JSON properties to HRA base geoJSON
        for (var i = 0; i<hraData[0].features.length; i++) {
            hraData[0].features[i].properties.estimate = Number(soda[i].estimate);
        }
    };

        function mapSetup() {
        //Functions to add geoJSON to leaflet map, add controls, legends, etc.
        };