D3 Choropleth Map: Цвета не отображаются

Question

У меня возникают проблемы с Choropleth Map, используя D3.

Я хочу показать вхождения катастрофы на карту мира за данный год, скажем, 2015.

У меня есть выпадающий список, чтобы изменить тип бедствия. В настоящее время я работаю с «Землетрясением».

Перед выбором «Earthquake» из выпадающего списка:

После выбора «Earthquake», он меняет цвет, но как-то не меняется, так как в стоимости. Ниже приведена информация:

Ниже приводится мой код для создания карты. Также не отображается никаких ошибок.

 // 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 

Может кто-нибудь, пожалуйста, смотрите в код и помочь?

EDITED: Добавление кода, который используется для цвета

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"; 
     } 
    }); 

Try:

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