javascript - D3.js Choropleth贴图-选择时更改配色方案

我有一张美国各州的choropleth地图，使用分位数标度显示了总人口。我还设置了一个下拉菜单，以允许用户使用定义了配色器的配色方案选择自己选择的配色方案。选择后，地图将填充新的配色方案。

我的问题是在配色方案选择上，形状仅用该配色方案中的一种颜色填充，而不是根据总体值填充一系列颜色。我知道问题是我实际上没有访问“ path”中的数据properties.value。我只是不知道该怎么做才能实现。任何建议都值得赞赏。这是我的变色功能：

$('#ColorSelection').change(function(){
    newColor = $('#ColorSelection').val();

   var colorSchemeSelect = newColor;
   var colorScheme = colorbrewer[colorSchemeSelect];

   var color = d3.scale.quantile()
     .range(colorScheme[5]);

   d3.selectAll("path").style("fill", function (d) {
      var value = d.properties.value;
      if (value) {
         return color(value);
      } else {
         return "#ccc”
      }
   })

 });

最佳答案

问题在于您要替换旧的色标，而不仅仅是更新它的范围，并且您永远都不会在新的色标上设置域。

var color = d3.scale.quantile() //create new quantile scale
     .range(colorScheme[5]); //set it's range

如果将比例存储在变量color中，只需在事件处理程序中对其进行修改：

color.range(colorScheme[5]); //change the range