D3 svg内のブートストラップのツールチップの破損

Question

該当するコードブロック。

 nodeEnter.append("text") 
     .attr("x", function (d) { return d.children || d._children ? -10 : 10; }) 
     .attr("dy", ".35em") 
     .attr("text-anchor", function (d) { return d.children || d._children ? "end" : "start"; }) 
     .text(function (d) { return d.ured; }) 
     .style("fill-opacity", 1e-6) 
     .attr("title", function (d) { return "user: " + d.ured +'BREAK LINE HERE'+ "name: " + d.name; }); 

BSのツールチップはありますが、変数間の線を壊す必要があります。

私は

.append("title") 
      .text(function (d) { return "user: " + d.ured + "\nname: asd"; }); 

のラインで物事を試みたし、彼らは別の行に表示されますが、それは、ブートストラップツールチップではありません。私もtspansとthisに従っていましたが、ツールチップで動作させることができませんでした。

アイデア？ありがとう。

Answer 1

将来的にこの問題に苦労している人は、すべてのノードを選択して、希望の場所に<br />をハードコードしました。最後にdata-html属性をtrueに設定します。

下の例のコードでは、私は文字列をbrutely返しましたが、もちろん、すばらしい設計の関数でそれを包むことができます。

svg.selectAll("g.node").each(function() { 
var node = d3.select(this);  
var tooltipText = function (d) { 
    return "User: " + d.user + "<br />Nombre: " + d.name; 
};        
if (tooltipText) { 
    node.select("text") 
     .attr("data-html", "true") 
     .attr("title", tooltipText); 
} 
}); 

回答への回答this質問への回答。