javascript - D3.js 等值线 map - 更改选择的颜色方案

Question

我有一张美国各州的分区统计图，使用分位数比例显示总人口。我还设置了一个下拉菜单，允许用户使用 colorbrewer 定义的配色方案来选择自己选择的配色方案。选择后， map 将填充新的配色方案。

我的问题在于配色方案选择，形状仅填充配色方案中的一种颜色，而不是基于人口值的一系列颜色。我知道问题是我实际上并没有访问“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”
      } 
   })

 });

Answer 1

问题是您替换旧的色标，而不仅仅是更新其范围，而且您从未在新色标上设置域。

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

如果您将比例存储在变量 color 中，只需在事件处理程序中修改它即可:

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