d3.js v4とAngularJSの信頼できないHTML

Question

特殊文字の問題が正しく表示されていません。角度のJS指令でd3.jsツリーレイアウト図を生成しています。指示文でテキストが図に追加されています特殊文字は正しく表示されません。アポストロフィの代わりに&＃39;および& amp;運のない

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

両方：代わりに&などの...私はまた、次のことを試してみました運

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

とフィルタ$filter('html')(d.name)の使用を試してみました私の指示で特殊文字を表示する方法はありますか？

Answer 1

問題は、現在、SVGテキスト要素にHTML entityを使用しようとしていますが、これは機能しません。

最初の解決策は、HTMLエンティティを適切なUnicodeに変更することです。あなたがすべき

.text("&") 

または

.text("&") 

：

.text("\u0026") 

チェックスニペット：

var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", 400) 
 
    .attr("height", 200); 
 
\t 
 
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>

たとえば、代わりにアンパサンドを表示します

第2の解決策は、HTMLエンティティを変更せずに使用することです。すべてのHTMLエンティティをUnicodeに変更するオプションがない場合は、foreign objectを追加してHTMLエンティティを受け入れることができます。