D3 percentage superscript

Question

I am trying to get a little percent sign superscript.

I found and example which works but not percent

var svgText = svg.append(\'text\').text(\'This          


        

Answer 1

Since there is no superscript character for % in unicode, you have to take the approach laid out by Andrew Reid in his answer. Although there is nothing wrong with his approach, you could make your life a little easier and the code a bit more readable by using the baseline-shift attribute of the :

The baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. The shifted object might be a sub- or superscript.

Since you can nest the tspan inside your normal text, there is no need to explicitly position the element. Your code could be something along the following lines:

  Test
  75%

Have a look at the following snippet for a working D3 demo:

var svg = d3.select("body").append("svg");

var text = svg
  .append("text")
    .attr("x", 50)
    .attr("y", 50)
    .text("Test");

// Superscript
text.append("tspan")
  .text("75%")
  .attr("baseline-shift", "super")
  .attr("font-size", "62%")
  .attr("font-weight", "bolder");