javascript - 垂直定位文本

Question

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

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)

Answer 1

您的问题标题(“将文本的每个字符旋转为垂直”，我已编辑)具有误导性:您不想旋转文本的每个字符.如果你停下来看看，文本中的每个字符都在正确的位置!这里没有任何旋转。

您想要的是垂直定位文本。

您可以使用传递选择的函数，使用 call，将文本拆分为其字符，并重新定位它们。这是我刚刚创建的示例:

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.select("svg")
var text = svg.append('text')
  .text('GRAPH LABEL')
  .attr("font-family", "Arimo")
  .attr("font-size", "18px")
  .attr("font-weight", "bold")
  .attr("fill", "#444")
  .attr("letter-spacing", "1.5px")
  .attr("text-anchor", "middle")
  .attr("x", 150)
  .attr("y", 20)
  .call(vertical);

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)
  }
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg height="300"></svg>