3

I'm trying to display a degree character (°) in a SVG manipulated by D3.js. So far I've tried different charsets but I'm always getting a � instead and the following character codes simply display themselves as regular text: ° or °.

I'm using <meta charset="UTF-8">.

How would you display that symbol? Maybe there's a SVG property I could set?

VincentDM
  • 469
  • 6
  • 17
  • Have a look at my [answer](https://stackoverflow.com/a/38072166/4235784) to [*"D3 append HTML not working in edge browser"*](/q/38064765). – altocumulus Aug 30 '18 at 10:54
  • I just tried the `\u00b0` char but without success. I'm using Firefox when I'm getting this result... Will update an example shortly! – VincentDM Aug 30 '18 at 11:03
  • I made this [CodePen](https://codepen.io/mrelemental/pen/zJoRdM) but it was displaying well... thanks to the insight of @squeamish-ossifrage I checked the encoding of a generated .json file and it was `Western European` rather than `UTF-8` – VincentDM Aug 30 '18 at 11:42

1 Answers1

5

I can't see why this should be a problem. You said you added <meta charset="UTF-8"> to the HTML file, but did you actually save it using UTF-8 encoding? Some plain text editors default to other character sets like iso-8859-1, so you might have incorrect character codes in there somewhere. If your Javascript is stored in a separate file, make sure that is properly encoded too.

Also bear in mind that character entities like &deg; won't work in SVG files.

var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 100);

svg.append("text")
  .text("Water boils at 100°C")
  .attr("x", 20)
  .attr("y", 50)
  .attr("font-family", "sans-serif")
  .attr("font-size", "40px");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
r3mainer
  • 23,981
  • 3
  • 51
  • 88
  • 1
    Ohh you got it! I was generating a .json file with C++ code and its encoding was `Western European (Windows) - Codepage 1252`. When I resaved it as `UTF-8` the webpage displayed the `°` correctly. The problem was not the page but the encoding of the generated file. – VincentDM Aug 30 '18 at 11:40