score:4

Accepted answer

There are two errors actually breaking the output of the text containing the degree sign. The first one is the use of selection.html() which is not to be used for SVG content:

Note: as its name suggests, selection.html is only supported on HTML elements. SVG elements and other non-HTML elements do not support the innerHTML property, and thus are incompatible with selection.html.

I suppose you chose that method because you wanted to insert an HTML entity, namely the degree sign. For reasons explained below this can be achieved by other means and the method in use can be changed to .text() to work with SVG content.

The second error is the use of an HTML entity (°) which is not defined for SVGs. As an alternative, you can use the Unicode escape sequence \u00b0 for your degree sign.

svg.append("text")
  // ...
  .data(['some html \u00b0'])  // Use Unicode escape sequence instead of HTML entity
  // ... .attr("", "")
  .text(function(d) {          // Use .text() instead of .html()
    return d;
  });

Have a look at the updated JSFiddle.


Your initial approach should actually work in no browser at all, because it is based on improper fiddling with DOM nodes. However, Chrome, FF and some others seem to be a bit more relaxed about it, while IE got it right.

score:0

It looks like it is not supported in Edge. I cannot find any documentation or other commentary with a rudimentary Google Search.

For my case what I ended up doing it just adding a two circles on top of each-other to make the symbol I needed.

    svg.append("circle")
        .attr("cx", degreeSignOffsetX)
        .attr("cy", degreeSignOffsetY)
        .attr("r", 2)
        .style("fill", function(d) { return 'black'; });

    svg.append("circle")
        .attr("cx", degreeSignOffsetX)
        .attr("cy", degreeSignOffsetY)
        .attr("r", 1)
        .style("fill", function(d) { return 'white'; });

There might be a better solution using a symbol but this worked for me and it meets my requirements.

If some one else has any info on why or if edge CAN do this and I am missing something feel free to answer and I will accept the answer


Related Query

More Query from same tag