d3 圆圈标题工具提示文本的换行符

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，替换为“ ”或“\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);
 }