如何将文本偏移其高度的一半，使其垂直居中一个角度

How to offset a text by half of its height to center it vertically by an angle?

本文关键字：垂直居中 一个 一半 文本 高度      更新时间：2023-09-26

我注意到我的文本有点偏移，只有当间距有限时才会注意到这一点。它应该是居中的（这是它的基线），但当间距碰巧比平时小时，它会让它看起来向上移动。

这是一个例子：jsFiddle。一个非常明显的现象是，如果点击红色类别，数字5。然后，最黄色的字段太窄，无法容纳现在看起来的文本。

var txt = d3.svg.arc().innerRadius(30).outerRadius(90);
grx.append("text")
  .attr("text-anchor", "start")
  .attr("transform", function(d) { 
    return "translate(" + txt.centroid(d) + ")"
      + "rotate(" + getRotation(d) + ")"; })
  .text(function(d) { return d.data.key; });
function getRotation(d) {
  var angle = (d.startAngle + d.endAngle) / Math.PI * 90 + 90;
  return angle < 90 || angle > 270 ? angle : angle - 180;
}

如何将文本偏移与渲染文本高度的一半相对应的角度？这难得离谱吗？

您可以使用dy属性将文本翻译到底部。要将其向下移动一半高度，该值应为0.5em。然而，从输出来看，这似乎太多了，使用0.3em看起来更赏心悦目。

grx.append("text")
  .attr("class", "legendMain")
  .attr("text-anchor", getAnchor)
  .attr("dy", "0.3em")   // Move downwards 30 percent its height

有关工作示例，请参阅此更新JSFiddle。

相关文章：