Orient text vertically

Question

I would like to set every character of label to vertical as shown below:

G
R
A
P
H

L
A
B
L
E

Any help is appreciated, you can find the code below:

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)

.attr("transform", "rotate(-90)" ) //did u try transform by degrees? More http://www.d3noob.org/2013/01/how-to-rotate-text-labels-for-x-axis-of.html — Luckyy, Jan 16 '18 at 10:55
If you can share fiddler or any online link, can help. Because it is expected to work. You just need to take care of correct node you are rotating. — Luckyy, Jan 16 '18 at 11:02
here is my jsfiddle https://jsfiddle.net/prashantparekh/38wuz5f8/ — Prashant Parekh, Jan 16 '18 at 11:39

Gerardo Furtado · Accepted Answer · 2018-01-17T05:11:53.107

Your question title ("Rotate every character of text to vertical", which I edited) is misleading: you don't want to rotate every character of the text. If you stop to see, each character in the text is in the correct position! There is nothing rotated here.

What you want is to orient the text vertically.

You can use a function that you pass the selection, using call, and that split the text into its characters, repositioning them. Here is an example that I just created:

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

And here is a demo:

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>

Orient text vertically

1 Answers1