D3.js正负值柱状图标签旋转问题：旋转后标签移出屏幕

API 探路者

2026-7-10

D3.js柱状图标签旋转90度的正确实现方法

直接用.attr("transform", "rotate(-90)")时，标签会绕SVG原点(0,0)旋转，自然会移出屏幕。要让标签绕自身位置旋转，有两种可靠的实现方式：

方法一：指定旋转中心

使用rotate(角度, 中心X, 中心Y)语法，直接把旋转中心设为标签的目标位置，标签就会绕自己的位置旋转：

// 假设已定义x比例尺（band scale）、y比例尺（linear scale）和数据data
svg.selectAll(".bar-label")
  .data(data)
  .enter()
  .append("text")
  .attr("class", "bar-label")
  // 计算标签的中心位置：柱子横向中心，纵向根据正负值调整（避免和柱子重叠）
  .attr("transform", d => {
    const centerX = x(d.category) + x.bandwidth() / 2;
    const centerY = d.value > 0 ? y(d.value) - 5 : y(d.value) + 15;
    return `rotate(-90, ${centerX}, ${centerY})`;
  })
  // 调整文本对齐，确保旋转后位置正确
  .attr("text-anchor", "middle")
  .attr("dominant-baseline", d => d.value > 0 ? "auto" : "hanging")
  .text(d => d.value);

方法二：先平移再旋转

先把文本平移到目标位置，再执行旋转操作，之后根据正负值微调文本偏移：

svg.selectAll(".bar-label")
  .data(data)
  .enter()
  .append("text")
  .attr("class", "bar-label")
  .attr("transform", d => {
    const centerX = x(d.category) + x.bandwidth() / 2;
    const centerY = d.value > 0 ? y(d.value) - 5 : y(d.value) + 15;
    // 先平移到目标位置，再旋转-90度
    return `translate(${centerX}, ${centerY}) rotate(-90)`;
  })
  // 旋转后文本方向改变，微调横向偏移避免重叠
  .attr("dx", d => d.value > 0 ? -5 : 5)
  .attr("text-anchor", "middle")
  .text(d => d.value);