D3.js热力图不等宽颜色图例实现问题求助

一、不等宽颜色图例修复 #

针对基于xValues温度-颜色二维数组的不等宽图例问题，按以下步骤排查修复：

1. 先清理数组 #

如果xValues末尾存在空元素，先过滤掉无效项，避免绑定数据时出错：

// 过滤掉空元素或格式不正确的项
const validXValues = xValues.filter(item => item?.length === 2);

2. 构建温度-像素映射比例尺 #

因为是不等宽区间，需要用温度区间的实际差值来计算每个图例矩形的宽度：

// 定义图例的基础尺寸和位置
const legendTotalWidth = 400; // 图例总像素宽度
const legendStartX = 50;      // 图例起始X坐标
const legendHeight = 20;      // 图例矩形高度

// 提取所有温度边界值，计算最小/最大温度
const allTempPoints = validXValues.flatMap(([range]) => range.split('-').map(Number));
const minTemp = Math.min(...allTempPoints);
const maxTemp = Math.max(...allTempPoints);

// 创建温度到像素位置的线性比例尺
const tempToPixel = d3.scaleLinear()
  .domain([minTemp, maxTemp])
  .range([legendStartX, legendStartX + legendTotalWidth]);

// 转换为可直接绘制的图例项数据
const legendData = validXValues.map(([tempRange, color]) => {
  const [startTemp, endTemp] = tempRange.split('-').map(Number);
  return {
    x: tempToPixel(startTemp),
    width: tempToPixel(endTemp) - tempToPixel(startTemp),
    fill: color,
    label: tempRange
  };
});

3. 绘制图例 #

基于处理好的legendData绘制矩形和标签：

// 在SVG中添加图例组（假设svg是你的主SVG对象，height是热力图高度）
const legendGroup = svg.append('g')
  .attr('transform', `translate(0, ${height + 30})`);

// 绘制不等宽颜色矩形
legendGroup.selectAll('rect')
  .data(legendData)
  .enter()
  .append('rect')
  .attr('x', d => d.x)
  .attr('y', 0)
  .attr('width', d => d.width)
  .attr('height', legendHeight)
  .attr('fill', d => d.fill);

// 绘制温度区间标签（居中对齐）
legendGroup.selectAll('text')
  .data(legendData)
  .enter()
  .append('text')
  .attr('x', d => d.x + d.width / 2)
  .attr('y', legendHeight + 15)
  .attr('text-anchor', 'middle')
  .style('font-size', '12px')
  .text(d => d.label);

特殊情况处理 #

如果温度区间包含<X或>X这类边界值，比如["<0", "#fff"]，需要手动设置对应的温度边界：

// 示例：处理"<0"和">40"的区间
const legendData = validXValues.map(([tempRange, color]) => {
  let startTemp, endTemp;
  if (tempRange.startsWith('<')) {
    startTemp = minTemp;
    endTemp = Number(tempRange.slice(1));
  } else if (tempRange.startsWith('>')) {
    startTemp = Number(tempRange.slice(1));
    endTemp = maxTemp;
  } else {
    [startTemp, endTemp] = tempRange.split('-').map(Number);
  }
  return {
    x: tempToPixel(startTemp),
    width: tempToPixel(endTemp) - tempToPixel(startTemp),
    fill: color,
    label: tempRange
  };
});

二、Tooltip文本居中修复 #

情况1：HTML类型Tooltip（div） #

直接给Tooltip容器添加CSS文本居中样式：

.tooltip {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 4px;
  text-align: center; /* 强制所有文本居中 */
  pointer-events: none;
}

情况2：SVG类型Tooltip（text元素） #

给每个文本行设置text-anchor: middle并对齐到Tooltip中心：

// 假设tooltip是一个SVG分组元素，tooltipWidth是Tooltip的宽度
tooltip.selectAll('text')
  .attr('text-anchor', 'middle')
  .attr('x', tooltipWidth / 2)
  .attr('y', (d, i) => 15 + i * 18); // 按行设置Y坐标

三、常见坑点排查 #

• 小数精度问题：使用d3.format('.1f')(value)格式化温度值，避免因浮点运算误差导致的位置偏移
• scaleLinear参数搞反：确保domain是温度范围，range是像素范围，不要颠倒
• 空元素未过滤：必须清理xValues中的空元素或无效项，否则数据绑定会出现undefined错误

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