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

Question

我注意到我的文字有点偏移，只有在间距有限时才会明显。它应该居中(它是它的基线)但是当间距恰好小于平时时它看起来向上移动。

这是一个例子: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;
}

如何将文本偏移对应于渲染文本高度一半的 Angular ？是不是特别难？

Answer 1

您可以使用 dy将文本翻译到底部的属性。向下移动 half 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

查看此更新 JSFiddle一个工作示例。