如何为D3.js分位数比例尺生成包含全部11种颜色的Choropleth Map图例？

问题背景 #

我在为Choropleth地图的分位数比例尺制作图例时遇到问题：比例尺的range参数设置了11种颜色，但当前图例代码仅能生成10种颜色的图例。

分位数比例尺代码 #

const educMin = d3.min(mapData.objects.counties.geometries, d => d.properties.bachelorsOrHigher);
const educMax = d3.max(mapData.objects.counties.geometries, d => d.properties.bachelorsOrHigher);
const colourScale = d3.scaleQuantile()
                      .domain([educMin, educMax])
                      .range(['#fff5eb','#fee8d3','#fdd8b3','#fdc28c','#fda762','#fb8d3d','#f2701d','#e25609','#c44103','#9f3303','#7f2704']);

现有图例代码 #

const legendBars = colourScale.quantiles()

const legend = map.append('g')
                  .attr('id', 'legend')
                  .attr('transform', 'translate(495, 550)');

legend.selectAll('rect')
      .data(legendBars)
      .enter()
      .append('rect')
      .attr('fill', function(d) {
        return colourScale(d)
       })
      .attr('x', (d, i) => 20 * i)
      .attr('width', 20)
      .attr('height', 20); 

问题原因 #

D3的scaleQuantile().quantiles()方法返回的是分位数阈值数组，其长度始终为颜色数量-1。这里设置了11种颜色，所以该方法只会返回10个阈值，用这个数组作为数据源自然只能生成10个图例矩形。

解决方案 #

直接使用比例尺的range数组作为图例矩形的数据源，就能生成对应全部11种颜色的图例：

修改后的基础图例代码 #

const legend = map.append('g')
                  .attr('id', 'legend')
                  .attr('transform', 'translate(495, 550)');

// 直接使用colourScale的range数组绑定数据
legend.selectAll('rect')
      .data(colourScale.range())
      .enter()
      .append('rect')
      .attr('fill', d => d) // 直接使用range中的颜色值
      .attr('x', (d, i) => 20 * i)
      .attr('width', 20)
      .attr('height', 20); 

带数值区间的完整图例（可选） #

如果需要标注每个颜色对应的数值区间，可以结合分位数阈值、最小值和最大值来生成标签：

const quantiles = colourScale.quantiles();
// 构建完整的区间边界数组：[最小值, 分位数1, 分位数2, ..., 最大值]
const intervalBounds = [educMin, ...quantiles, educMax];

const legend = map.append('g')
                  .attr('id', 'legend')
                  .attr('transform', 'translate(495, 550)');

// 绘制颜色矩形
legend.selectAll('rect')
      .data(colourScale.range())
      .enter()
      .append('rect')
      .attr('fill', d => d)
      .attr('x', (d, i) => 20 * i)
      .attr('width', 20)
      .attr('height', 20);

// 添加区间边界标签
legend.selectAll('.interval-label')
      .data(intervalBounds)
      .enter()
      .append('text')
      .attr('class', 'interval-label')
      .attr('x', (d, i) => 20 * i)
      .attr('y', 30)
      .attr('font-size', 10)
      .text(d => d.toFixed(1));

这样既可以显示全部11种颜色，又能清晰标注每个颜色对应的数值范围。

内容的提问来源于stack exchange，提问作者Luke Worley