Javascript 垂直定向文本

我想将标签的每个字符设置为垂直，如下所示：

G
R
A
P
H

L
A
B
L
E

感谢您的帮助，您可以找到以下代码：

var centerG = g.append('g')
    .attr('x', ((width / 2) - (barWidth / 2)))
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

centerG.append('text')
    .text('GRAPH LABEL')
    .attr("font-family", "Arimo")
    .attr("font-size", "18px")
    .attr("font-weight", "bold")
    .attr("fill", "#FFFFFF")
    .attr("letter-spacing", "1.5px")
    .attr("text-anchor", "middle")
    .attr("transform", "translate(" + ((width / 2) + barOffset) +
        ", " + yHeight + ") rotate(270)")
    .attr("class", "centerLabelText")
    .attr("y", 0)

您的问题标题（“将文本的每个字符旋转为垂直”，我编辑了该标题）具有误导性：您不想旋转文本的每个字符。如果您停下来查看，文本中的每个字符都位于正确的位置！这里没有旋转

您需要的是垂直定向文本

您可以使用一个函数传递选择，使用

调用

，并将文本拆分为其字符，重新定位它们。下面是我刚刚创建的一个示例：

function vertical(elem) {
  var xPos = elem.attr("x")
  var letters = elem.text().split("");
  var tspan = elem.text(null);
  while (letters.length) {
    tspan.append("tspan")
      .text(letters.shift())
      .attr("dy", "1em")
      .attr("x", xPos)
  }
}

下面是一个演示：

var svg=d3.选择（“svg”）
var text=svg.append（'text'）
.text（'图形标签'）
.attr（“字体系列”、“Arimo”）
.attr（“字体大小”，“18px”）
.attr（“字体大小”、“粗体”）
.attr（“填充”，“#444”）
.attr（“字母间距”，“1.5px”）
.attr（“文本锚定”、“中间”）
.attr（“x”，150）
.attr（“y”，20）
.呼叫（垂直）；
垂直功能（elem）{
var xPos=elem.attr（“x”）
var letters=elem.text（）.split（“”）；
var tspan=elem.text（null）；
while（字母长度）{
tspan.追加（“tspan”）
.text（字母.shift（））
.attr（“dy”、“1em”）
.attr（“x”，xPos）
}
}

.attr（“变换”、“旋转（-90）”）//您是否尝试过按度变换？更幸运的是，这不起作用。我试过了！如果你可以分享fiddler或任何在线链接，可以提供帮助。因为人们期望它能起作用。您只需要注意正在旋转的正确节点