如何为D3日历热力图添加日期数字标注？

嘿，刚好我之前折腾过类似的D3日历布局修改，给你一套清晰的步骤，帮你在每个日期矩形的角落加上8号小字体的日期数字：

• 找到矩形绘制的核心代码块
  首先定位到你绑定日期数据、绘制.day矩形的部分——这部分你已经改好旋转和月份筛选了，我们要在它后面追加文本元素的逻辑，确保文本和矩形绑定的是同一批日期数据。

• 绑定文本元素到日期数据集
  用和绘制矩形相同的data()方法，创建一个新的文本选择集，给文本元素加个专属类名（比如.day-number），方便后续样式控制：

  svg.selectAll(".day-number")
    .data(data)
    .enter()
    .append("text")
  

• 精准定位文本到矩形角落
  根据你当前的x/y比例尺和旋转布局，计算文本的位置：

  • 如果要放在左上角：给x设为x(d) + 2（加2px留边距），y设为y(d) + 10（因为8号字体的基线在底部，往下挪10px刚好让数字在矩形内）。
  • 如果要放在右下角：可以设置text-anchor: end，然后x设为x(d) + x.bandwidth() - 2，y设为y(d) + y.bandwidth() - 2。
    注意：如果你的日历用了transform: rotate()旋转，文本元素也要加上相同的transform属性，不然数字会歪掉。

• 设置文本样式和内容
  最后配置文本的内容和样式：

  .attr("class", "day-number")
  .attr("x", d => x(d) + 2)
  .attr("y", d => y(d) + 10)
  .attr("font-size", "8px")
  .attr("fill", "#666") // 选和背景对比明显的颜色
  .attr("pointer-events", "none") // 避免文本遮挡矩形的交互事件
  .text(d => d.getDate()); // 提取日期的“几号”数字
  

• 额外优化提示

  • 如果你的部分月份日期很密集，8号字体可能重叠，可以给不在目标月份的日期数字加个过滤，或者微调偏移量。
  • 测试时可以先把fill设为红色，方便快速调整位置，确认没问题后再改成合适的颜色。

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