如何在JavaScript地图可视化图例中添加缺失值的红色标记？

问题背景 #

我正在使用D3.js进行地图可视化，数据中存在部分缺失的州/地区，已通过代码为缺失值对应的地图区域填充红色：

{
  var projection = projection1; 
  
  //Create SVG element
  var mapSvg = d3.create("svg")
    .attr("width", w)
      .attr("height", h);

  var ramp = d3.scaleSequential().interpolator(d3.interpolateRgb("lightyellow", "green")).domain([0, 5600000])
  
  var path = d3.geoPath()
    .projection(projection);
  mapSvg
      .selectAll("path")
      .data(data.features)
      .enter()
      .append("path")
      .attr("d", path)
      .style("stroke", "white")
      .style("fill", d => hay.has(d.properties.name.toUpperCase()) ? ramp(hay.get(d.properties.name.toUpperCase())) : "red")// red for missing value
      .append('title')
      .text((d) => `${d.properties.name}\n${hay.has(d.properties.name.toUpperCase()) ? hay.get(d.properties.name.toUpperCase()) : "Missing value"}`);
  
  return mapSvg.node();
}

同时已通过以下代码创建颜色比例尺用于生成图例：

colorScale = d3.scaleSequential().interpolator(d3.interpolateRgb("lightyellow", "green")).domain([0, 5600000])

并使用d3 legend生成图例：

legend({ color: colorScale, title: "Corp Hay", tickFormat: ".02s" })

现需将代表缺失值的红色添加至该图例中，请问如何实现？

解决方案 #

由于d3-legend的连续比例尺图例仅针对数值范围渲染，缺失值属于离散的特殊类别，需要手动在已生成的图例中添加额外的标识项。具体步骤如下：

1. 生成原有连续比例尺图例 #

先按原有逻辑创建连续图例，并将其挂载到指定的SVG容器中：

// 选择图例容器并创建SVG
const legendContainer = d3.select("#legend-container");
const legendSvg = legendContainer.append("svg");

// 生成连续比例尺图例
legendSvg.call(legend({
  color: colorScale,
  title: "Corp Hay",
  tickFormat: ".02s"
}));

2. 手动添加缺失值图例项 #

获取已有图例的容器组，在其下方添加红色方块和文字说明：

// 获取图例的根容器组
const legendGroup = legendSvg.select(".legend");

// 计算新图例项的位置（放在原有图例下方，间距10px）
const legendHeight = legendGroup.node().getBBox().height;
const missingEntry = legendGroup.append("g")
  .attr("transform", `translate(0, ${legendHeight + 10})`);

// 添加红色填充的方块
missingEntry.append("rect")
  .attr("width", 20)
  .attr("height", 20)
  .attr("fill", "red");

// 添加缺失值文字说明
missingEntry.append("text")
  .attr("x", 25)
  .attr("y", 15) // 对齐方块中心
  .style("font-size", "12px")
  .text("Missing Value");

说明 #

• 通过getBBox()获取原有图例的高度，确保新的图例项不会和原有内容重叠
• 可以根据需要调整方块的尺寸、文字样式和位置偏移量
• 如果你的图例是横向布局，只需调整translate的x参数即可

内容的提问来源于stack exchange，提问作者Fateme Nazari