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 <tspan>:

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:

<text x="100" y="100">
  Test
  <tspan baseline-shift="super" font-weight="bolder" font-size="62%">75%</tspan>
</text>

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");

<script src="https://d3js.org/d3.v5.js"></script>

Answer 2

Why not use a tspan? This will allow you to format any text how you want, superscript or otherwise, no matter if there is a unicode superscript symbol you can use:

Within a element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a <tspan> element. (MDN)

There are a few approaches you could take in this regard, but if you can extract the text that needs to be superscript (or generate it on the fly), then you can create the superscript and regular text relatively easly. Below I use a tspan to hold the regular text and another to hold the superscript:

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

var data = [
  {text: "Here's some normal text", super:"Here's superscript"}, 
  {text:"Some text", super:"α,β,γ,%,!,1,2,3"}
];

var text = svg.selectAll()
  .data(data)
  .enter()
  .append("text")
  .attr("x", 10)
  .attr("y", function(d,i) { return i * 20 + 20; });
  
// Main content:
text.append("tspan")
  .text(function(d) { return d.text; })
  .attr("font-size", 14)
  
// Superscript content:
text.append("tspan")
  .text(function(d) { return " " +d.super; })
  .attr("dy",-5)
  .attr("font-size",11)

<script src="https://d3js.org/d3.v5.min.js"></script>

With a bit of string manipulation you could use this pattern without pre-existing properties for each text string (below I use only one text span with normal text just being added as normal):

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

var data = [
  "Length is 10px - 10%",
  "Height is 20px - 30%"
];

var text = svg.selectAll()
  .data(data)
  .enter()
  .append("text")
  .attr("x", 10)
  .attr("y", function(d,i) { return i * 20 + 20; })
  .text(function(d) {
    return d.split("-")[0];
  });
  
// Superscript content:
text.append("tspan")
  .text(function(d) { return d.split("-")[1]; })
  .attr("dy",-5)
  .attr("font-size",11)

<script src="https://d3js.org/d3.v5.min.js"></script>

The tspan approach is useful in that it maintains text position, which is easier to manage than placing multiple text elements where the position of each depends on the width of other text elements.