关于javascript：d3圆标题工具提示文字的换行符


line break for d3 circle title tooltipText

我正在使用d3的svg，当圆标题的tooltipText为" line1 \ nline2"时，该行未分为2，而仅显示了原始文本" line1 \ nline2"。

尝试在工具提示中添加换行符，并且在使用d3.js时是否可以在文本中插入换行符？

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

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

非常感谢。

试用1，替换为"＆＃013"或" \ u000d"

1
2
3
4
5
6
7
8
9
10
svgContainer.selectAll("g.node").each(function() {
 var node = d3.select(this);
 var tooltipText = node.attr("name"); // tooltipText is"line1\
line2"
 // trying to use entity code, not working. Also tried to replace with"\\u000d"
 var tooltipText = node.attr("name").replace("\\\
","  
 if (tooltipText) {
   node.select("circle").attr("title", tooltipText);
 }

还尝试在Bootstrap 3中将.attr("data-html","true")添加换行符到工具提示中

1
2
3
4
5
6
7
8
9
10
11
12
svgContainer.selectAll("g.node").each(function() {
 var node = d3.select(this);
 var tooltipText = node.attr("name"); // tooltipText is"line1\
line2"
 // trying to use entity code, not working. Also tried to replace with"\\u000d"
 var tooltipText = node.attr("name").replace("\\\
","  
 if (tooltipText) {
   node.select("circle")
     .attr("data-html","true")
     .attr("title", tooltipText);
 }

在参考如何使Twitter引导工具提示具有多行内容之后，我自己弄清楚了这一点？

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

  • 将\
    更改为
  • 添加属性.attr("data-html","true")

    • 工作版本：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    svgContainer.selectAll("g.node").each(function() {
     var node = d3.select(this);
     var tooltipText = node.attr("name");
     var tooltipText = node.attr("name").replace("\\\
    "    ,"<br />");
     if (tooltipText) {
       node.select("circle")
         .attr("data-html","true")
         .attr("title", tooltipText);
     }