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

Question

我使用的是 d3 的 svg，当圆标题的工具提示文本是 "line1\nline2" 时，该行没有分成 2 行，只是 显示原始文本 "line1\nline2".

尝试了 Add line break within tooltips and Can you insert a line break in text when using d3.js?，但没有用

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

即\n 得到了解释。我假设更改后端响应不会有帮助，因为它是表示层的错误。

非常感谢。

Trial-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 个地方：

将 \n 更改为 <br />
添加属性.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);
 }

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

line break for d3 circle title tooltipText

javascript

svg

newline

tooltip

d3.js