CODEWITHSUNDEEP
javascriptd3.jsrotation
Prashant Parekh
Prashant Parekh

Reputation: 428

Orient text vertically

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)

Upvotes: 3

Views: 71

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102218

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>

Upvotes: 2

Related Questions