Untrusted Html In D3.js V4 And Angularjs

I am having issue with special character not being displayed properly, I am generating a d3.js tree layout diagram via an angular JS directive, text is being added into the diagram

Solution 1:

The problem is that, right now, you are trying to use an HTML entity in the SVG text element, and this won't work.

The first solution is just changing the HTML entity for the proper Unicode. For instance, to show an ampersand, instead of:

.text("&")

or

.text("&")

You should do:

.text("\u0026")

Check the snippet:

var svg = d3.select("body")
    .append("svg")
    .attr("width", 400)
    .attr("height", 200);
	
svg.append("text")
    .attr("x", 10)
    .attr("y", 20)
    .text("This is an ampersand with HTML entity:  & (not good)");

svg.append("text")
    .attr("x", 10)
    .attr("y", 50)
    .text("This is an ampersand with Unicode: \u0026 (perfect)");

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

The second solution involves using the HTML entities without changing them. If changing all your HTML entities to Unicode is not an option to you, you can append an foreign object, which accepts HTML entities.