如何在D3中将文本标签设置为垂直显示以保证标签可读性

问题根因 #

你当前代码的核心问题是transform属性赋值时没有正确计算变量值，直接把函数表达式写进了字符串，同时没有设置文本对齐锚点，旋转后位置完全偏移，才导致标签无法正常垂直显示。

修正方案 #

你可以按以下逻辑调整代码：

• 修正transform的取值逻辑，先计算每个标签的坐标再传入旋转参数，通常垂直显示用-90度或者90度旋转即可
• 新增text-anchor属性控制文本对齐规则，避免旋转后位置错位
• 调整文本的y轴坐标，把日期标签放在图表底部而非柱形顶部，提升可读性

修改后的代码参考 #

const svg = d3.select("body")
  .append("svg")
  .attr("width",w)
  .attr("height",h)
  .attr("style", "outline: thin solid red;");

svg.selectAll("rect")
  .data(dataSet)
  .enter()
  .append("rect")
  .attr("x", (d,i) => i * 10)
  .attr("y", (d) =>  ( h - (d[1]/10  )  ) )
  .attr("width", 8)
  .attr("height", (d) => d[1] /10 )
  .attr("class", 'bar')
  .attr("data-date",(d) => d[0])
  .attr("data-gdp",(d) =>  d[1])
  .append("title")
  .text((d) => d)

// 日期标签调整部分
svg.selectAll("text")
  .data(dataSet)
  .enter()
  .append("text")
  .text((d) => d[0]) // 只取日期字段显示，不要展示整个数组
  .attr("x", (d,i) => i * 10 + 4) // 对齐每个柱形的中心
  .attr("y", h - 5) // 固定放在svg底部，距离底部5px
  .attr("text-anchor", "end") // 文本尾端对齐坐标点
  .attr('transform', (d,i) => {
    // 先定位到对应坐标，再逆时针旋转90度实现垂直显示
    return `translate(${i * 10 + 4}, ${h - 5}) rotate(-90)`;
  })

如果后续觉得标签间距过小重叠，可以适当调大每个柱形的x轴偏移量，或者只按季度/年度间隔显示标签，进一步提升可读性。

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