D3.js新手求助：年月温度地图底部图例无法显示问题排查

首先看你提供的代码片段，已经有了绘制图例颜色块的雏形，但还有几个关键问题需要调整，我来一步步帮你梳理：

一、现有代码的潜在问题 #

• 你的attr("fill", (d, i) => color...部分不完整，这里需要明确颜色的来源：如果colors是直接的颜色值数组，应该返回d；如果是温度值数组，需要通过你的颜色比例尺（比如colorScale(d)）来获取对应颜色。
• 只绘制了颜色矩形，缺少温度值文本标签，这样用户无法知道每个颜色对应的具体温度范围/数值。
• 图例的x轴起始用了固定值300，在不同宽度的SVG里可能会偏移或超出画布，建议用动态计算来适配。
• 没有给图例元素添加类名，后续更新图表时容易出现重复绘制的问题。

二、完整实现步骤 #

假设你已经有了温度数据对应的颜色比例尺（比如D3的scaleSequential或scaleQuantize），下面是完整的图例实现代码：

1. 先定义颜色比例尺（如果还没做） #

// 假设你的温度范围是minTemp到maxTemp
const minTemp = 0;
const maxTemp = 35;
// 用RdYlBu配色（红-黄-蓝，适合温度地图）
const colorScale = d3.scaleSequential()
  .domain([minTemp, maxTemp])
  .interpolator(d3.interpolateRdYlBu);

2. 生成图例所需的颜色与温度对应数据 #

// 定义图例的刻度数量，比如分5档
const legendTickCount = 5;
// 生成每个刻度对应的温度值和颜色
const legendData = d3.range(legendTickCount).map(i => {
  // 计算当前刻度的温度值，保留1位小数
  const currentTemp = minTemp + (maxTemp - minTemp) * i / (legendTickCount - 1);
  return {
    temp: currentTemp.toFixed(1),
    color: colorScale(currentTemp)
  };
});

3. 绘制图例（颜色块+文本标签） #

const svgWidth = 800; // 你的SVG宽度
const h = 600; // 你的SVG高度
const legendWidth = 40; // 每个颜色块的宽度
const legendHeight = 20; // 每个颜色块的高度
// 让图例居中显示，动态计算起始x坐标
const legendXStart = (svgWidth - legendWidth * legendTickCount) / 2;
const legendY = h - 40; // 图例距离底部的位置

// 绘制颜色矩形
svg.selectAll(".legend-rect")
  .data(legendData)
  .enter()
  .append("rect")
  .attr("class", "legend-rect")
  .attr("x", (d, i) => legendXStart + i * legendWidth)
  .attr("y", legendY)
  .attr("width", legendWidth)
  .attr("height", legendHeight)
  .attr("fill", d => d.color);

// 绘制温度文本标签
svg.selectAll(".legend-text")
  .data(legendData)
  .enter()
  .append("text")
  .attr("class", "legend-text")
  .attr("x", (d, i) => legendXStart + i * legendWidth + legendWidth/2)
  .attr("y", legendY + legendHeight + 15) // 文本在颜色块下方
  .attr("text-anchor", "middle") // 文本居中对齐
  .attr("font-size", "12px")
  .text(d => `${d.temp}°C`);

三、额外优化建议 #

• 如果你的温度是分区间的（比如0-10°C，10-20°C），可以把legendData改成生成区间文本，比如text(d => ${d.minTemp}~${d.maxTemp}°C)。
• 如果需要更新图例（比如切换年份月份时），记得先调用.exit().remove()来清除旧的图例元素，再重新绘制。

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