如何在D3.js热力图的每个矩形上方添加文本显示对应数值？

你只需在原有绘制热力方块的代码后，新增一段文本元素渲染逻辑即可，具体修改如下：

原有绘制方块的代码无需调整，在其结束后追加以下代码：

// 给每个热力方块添加数值文本
svg.selectAll()
  .data(data, function(d) {return d.group+':'+d.variable;})
  .enter()
  .append("text")
  // 计算文本位置，默认居中对齐，可按需调整偏移量
  .attr("x", function(d) { return x(d.group) + x.bandwidth() / 2 })
  .attr("y", function(d) { return y(d.variable) + y.bandwidth() / 2 })
  // 文本对齐属性，保证居中效果
  .attr("text-anchor", "middle")
  .attr("dominant-baseline", "middle")
  // 可按需调整字体大小、颜色
  .style("font-size", "12px")
  .style("fill", "#ffffff")
  .text(function(d) {
    // 若需要保留固定小数位，可改为 return d.value.toFixed(1)
    return d.value
  })

如果需要文本显示在方块上方而非居中，只需调整y属性的计算逻辑，比如改为return y(d.variable) - 6，同时可以根据自己的色块配色调整文本颜色，保证可读性即可。

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