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

我注意到我的文本有点偏移，这只有在间距有限的情况下才值得注意。它应该是居中的（这是它的基线），但它使它看起来向上移动时，间距恰好比平常小

这是一个例子：。一个非常明显的现象是，如果你点击红色的第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;
}

var txt=d3.svg.arc（）.innerRadius（30）、outerRadius（90）；
grx.追加（“文本”）
.attr（“文本锚定”、“开始”）
.attr（“转换”，函数（d）{
返回“translate（“+txt.centroid（d）+”）”
+旋转（“+getRotation（d）+”；}）
.text（函数（d）{return d.data.key；}）；
函数getRotation（d）{
变量角度=（d.startAngle+d.endAngle）/Math.PI*90+90；
返回角度<90 | |角度>270？角度：角度-180；
}

如何将文本偏移与渲染文本高度的一半相对应的角度？这是非常困难的吗？

您可以使用该属性将文本翻译到底部。要向下移动，该值应为

0.5em

。从输出来看，这似乎太多了，不过，使用

0.3em

看起来更赏心悦目

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

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

您可以使用该属性将文本翻译到底部。要向下移动，该值应为

0.5em

。从输出来看，这似乎太多了，不过，使用

0.3em

看起来更赏心悦目

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

---

查看此更新以了解一个工作示例。

使用

getBBox

查找svg元素的高度和宽度，然后使用

transform

？使用

getBBox

查找svg元素的高度和宽度，然后使用

transform

？确实，它看起来很合适。只有两个后续问题。（1） 我们实际上是将文本旋转了一小圈还是垂直向下推？（对于小角度而言，差异可以忽略不计，因此这不是批评——只是好奇，因为我不能通过观察效果来判断。）（2）为什么30%？这是一个任意的数额，似乎做的工作，还是有一个“规则”的文本得到30%的提高，我们需要反作用？（1）这是推动它向下。旋转完全是由应用于旋转文本的

transform=“rotate（）”

引起的。（2） 我的第一次尝试是按照您的要求将其设置为

0.5

“如何将文本偏移其高度的一半”。但这看起来不对，所以我把它看成了

0.3em

，I。E30%的高度。事实上，它看起来既合适又漂亮。只有两个后续问题。（1） 我们实际上是将文本旋转了一小圈还是垂直向下推？（对于小角度而言，差异可以忽略不计，因此这不是批评——只是好奇，因为我不能通过观察效果来判断。）（2）为什么30%？这是一个任意的数额，似乎做的工作，还是有一个“规则”的文本得到30%的提高，我们需要反作用？（1）这是推动它向下。旋转完全是由应用于旋转文本的

transform=“rotate（）”

引起的。（2） 我的第一次尝试是按照您的要求将其设置为

0.5

“如何将文本偏移其高度的一半”。但这看起来不对，所以我把它看成了

0.3em

，I。E30%的高度。