如何正确将D3连续色阶图例的刻度值水平对齐在刻度线下方

D3连续色阶图例刻度标签水平对齐解决方案 #

你只需要在原有调用轴方法的代码后追加tick文本的样式调整，同时按需替换轴生成器类型即可实现水平对齐不倾斜的效果，具体修改如下：

如果是横向色阶（颜色沿水平方向渐变），推荐改用axisBottom生成轴，完整代码：

const margin = { top: 10, right: 60, bottom: 30, left: 2 }; // 增大bottom值预留标签展示空间

const legendaxis = d3.axisBottom(legendscale)
  .tickSize(16)
  .tickValues(legendscale.domain());

// 其余业务代码保持不变

svg.append("g")
  .attr("class", "axis")
  .style("font-size", "14px")
  .style("font-weight", "700")
  // Y轴偏移增加tickSize对应的长度，将轴线对齐到色条底部
  .attr("transform", `translate(${80 - margin.left - margin.right + 3}, ${margin.top + 16})`)
  .call(legendaxis)
  // 核心调整：统一设置刻度文本样式
  .selectAll("text")
  .attr("transform", "rotate(0)") // 强制文本不旋转，水平展示
  .style("text-anchor", "middle") // 文本中心对齐刻度线
  .attr("y", 10); // 调整文本和刻度线的垂直间距

如果是纵向色阶（颜色沿垂直方向渐变），保留axisRight即可，仅追加文本调整逻辑：

svg.append("g")
  .attr("class", "axis")
  .style("font-size", "14px")
  .style("font-weight", "700")
  .attr("transform", `translate(${80 - margin.left - margin.right + 3}, ${margin.top})`)
  .call(legendaxis)
  .selectAll("text")
  .attr("transform", "rotate(0)") // 强制水平展示
  .style("text-anchor", "start")
  .attr("x", 8) // 调整文本和刻度线的水平间距
  .attr("dy", "0.3em"); // 垂直对齐刻度线

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