D3 Choropleth 地图：颜色未出现

Question

我在使用 D3 的 Choropleth Map 时遇到问题。

我想在世界地图上显示给定年份发生的灾难，比如 2015 年。

我有一个更改灾难类型的下拉菜单。我目前正在处理“地震”。

在从下拉列表中选择“地震”之前：

选择“地震”后，它正在改变颜色，但不知何故没有根据值改变。下面是输出：

以下是我生成地图的代码，它也没有显示任何错误。

       // Load Data
        d3.csv("disaster_data.csv", function(data){
            // Set color
            color.domain([
                d3.min(data, function(d) { return +d[occurrence]; }), 
                d3.max(data, function(d) { return +d[occurrence]; })
            ]);

            // Load Map JSON
            d3.json("d3-geo/mapshaper_output.json", function(error, json) {
                if (error) throw error;
                // Create Map
                var countries = svg.selectAll(".countries")
                                       .data(json.features)
                                       .enter()
                                       .append("path");
                countries.attr("d", path)
                                   .attr("stroke", "gray");

                // Return number of occurrences for given dataset countrywise
                function get_occurrences(disaster_type, year){
                    if(disaster_type == "Earthquake"){
                        var dataEarthquake = data.filter(function(a) {return a.disaster_type == disaster_type});
                        var dataEarthquake_Year = dataEarthquake.filter(function(a) {return a.year == year});
                        for(var i = 0; i < dataEarthquake_Year.length; i++){
                            var dataCountryCode = dataEarthquake_Year[i].iso;
                            var dataOccurence = +dataEarthquake_Year[i].occurrence;
                            for (var j = 0; j < json.features.length; j++) {
                                var jsonCountryCode = json.features[j].properties.iso_a3;
                                if (dataCountryCode == jsonCountryCode) {
                                    json.features[j].properties.occurrence = dataOccurence;
                                    break;
                                }
                            }                   
                        }
                        countries.attr("d", path)
                                .attr("stroke", "gray")
                                .attr("fill", function(d) {
                            var value = d.properties[occurrence];
                                                            if (value) {
                                return color(value);
                            } else {
                                return "#aaa";
                            }
                        });
                    }
                }

                // Dropdown change event
                dropdown.on("change", change);
                var selected_year = 2015;
                var occurrence_country = 0;

                function change(){
                    if(this.value == "Earthquake"){
                        occurrence_country = get_occurrences("Earthquake", selected_year);
                    }
                }
            }); // JSON ends
            d3.select(self.frameElement).style("height", height + "px");
        }); // CSV Load ends

任何人都可以查看代码并提供帮助吗？

已编辑： 添加用于颜色的代码

var colorgrad = ['#fcfbfd','#efedf5','#dadaeb','#bcbddc','#9e9ac8','#807dba','#6a51a3','#54278f','#3f007d'];
var color = d3.scale.quantize().range(colorgrad);

Answer 1

代替：

countries.attr("d", path)
    .attr("stroke", "gray")
    .attr("fill", function(d) {
        var value = d.properties[occurrence];
        if (value) {
            return color(value);
        } else {
            return "#aaa";
        }
    });

试试：

d3.selectAll("path)
    .attr("stroke", "gray")
    .attr("fill", function(d) {
        var value = d.properties[occurrence];
        if (value) {
            return color(value);
        } else {
            return "#aaa";
        }
    });