Question

我遇到特殊字符无法正常显示的问题，我通过角度JS指令生成d3.js树布局图，指令中的文本被添加到图中，但是任何特殊字符都没有正确显示，而不是撇号，我得到＆amp;＃39;和＆amp; amp;而不是＆amp;等...我尝试过使用过滤器$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;
      })

OR

    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 entity，这不会起作用。

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

$.ajax({
   url: url,
   data: data,
   type: 'POST',
   dataType: 'json',
   success: function(data){
   //now you can use it as json not as a string as you did before, so all your methods will work

   }
})

或

.text("&amp;")

你应该这样做：

.text("&#38;")

检查代码段：

＆＃13;

.text("\u0026")

＆＃13;

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:  &amp; (not good)");

svg.append("text")
    .attr("x", 10)
    .attr("y", 50)
    .text("This is an ampersand with Unicode: \u0026 (perfect)");

＆＃13;

第二种解决方案涉及使用HTML实体而不更改它们。如果您不能将所有HTML实体更改为Unicode，则可以附加foreign object，它接受HTML实体。

d3.js v4和AngularJS

1 个答案: