换行d3圈标题tooltipText

Question

我正在使用d3的svg，当圆形标题的tooltipText为“line1 \ nline2”时，该行不会分为2，而只是显示原始文本“line1 \ nline2”

尝试了Add line break within tooltips和Can you insert a line break in text when using d3.js?，但没有正常工作

有没有办法让显示2行而不是1行原始文本？

即。 \n被解释了。我认为改变后端响应无济于事，因为它是表示层的错误。

非常感谢。

试验-1，替换为“＆amp;＃013”或“\ u000d”

svgContainer.selectAll("g.node").each(function() {
 var node = d3.select(this);
 var tooltipText = node.attr("name"); // tooltipText is "line1\nline2"
 // trying to use entity code, not working. Also tried to replace with "\u000d"
 var tooltipText = node.attr("name").replace("\\n", "&#013"); 
 if (tooltipText) {
   node.select("circle").attr("title", tooltipText);
 }

还尝试添加.attr("data-html", "true") Add line break to tooltip in Bootstrap 3

svgContainer.selectAll("g.node").each(function() {
 var node = d3.select(this);
 var tooltipText = node.attr("name"); // tooltipText is "line1\nline2"
 // trying to use entity code, not working. Also tried to replace with "\u000d"
 var tooltipText = node.attr("name").replace("\\n", "&#013"); 
 if (tooltipText) {
   node.select("circle")
     .attr("data-html", "true")
     .attr("title", tooltipText);
 }

Answer 1

在引用How to make Twitter bootstrap tooltips have multiple lines?

之后，我自己弄明白了

我必须在2个地方以下更改：

1. 将\n更改为<br />
2. 添加属性.attr("data-html", "true")

工作版：

svgContainer.selectAll("g.node").each(function() {
 var node = d3.select(this);
 var tooltipText = node.attr("name");
 var tooltipText = node.attr("name").replace("\\n", "<br />"); 
 if (tooltipText) {
   node.select("circle")
     .attr("data-html", "true")
     .attr("title", tooltipText);
 }