d3.js v4和AngularJS中的不可信HTML

Question

我有特殊字符不能正确显示的问题，我正在通过一个角JS指令生成一个d3.js树布局图，该指令正在将文本添加到图表中，但是任何特殊字符都没有正确显示，而是撇号我得到‘和&代替&等等.我尝试过使用过滤器$filter('html')(d.name)，但没有成功。

    app.filter('html',function($sce){
    return function(input){
        var value = input.toString();
        console.log(input);
        var output = $sce.trustAsHtml(value);
        console.log(output);
        return output;
    }
});

我还尝试了以下几点：

 nodeEnter.append("text")
      .attr("dy", 3)
      .attr("x", 1e-6)

      .attr("compile-template","")
      .attr("ng-bind-html", function(d) {
        var output = $sce.trustAsHtml(d.name);  
        return output;
      })

或

    nodeEnter.append("text")
      .attr("dy", 3)
      .attr("x", 1e-6)
     .text(function(d) {
        var output = $sce.trustAsHtml(d.name);  
        return output;
      })

在没有运气的情况下，还有其他方法可以通过我的指令来显示特殊字符吗？

Answer 1

问题是，现在，您正试图在SVG文本元素中使用HTML实体，这是行不通的。

第一个解决方案就是更改HTML实体以获得正确的Unicode。例如，显示一个符号，而不是：

.text("&")

或

.text("&")

你应该这样做：

.text("\u0026")

检查代码片段：

​

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

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

​

第二个解决方案涉及在不更改HTML实体的情况下使用它们。如果将所有HTML实体更改为Unicode对您来说不是一个选项，则可以附加一个接受异物实体的HTML。