d3圆标题tooltipText的换行符 [英] line break for d3 circle title tooltipText

问题描述

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

I'm using d3's svg, when the tooltipText for a circle title is "line1\nline2", the line is not broken into 2, but just showing the raw text "line1\nline2".

尝试了添加换行符工具提示和 Can在使用d3.js？时，在文本中插入换行符，但不起作用

tried Add line break within tooltips and Can you insert a line break in text when using d3.js?, but not working

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

Is there a way to have it show 2 lines instead of 1 line with raw text?

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

i.e. \n got interpreted. I assume changing backend response will not help since it's a bug of presentation layer.

非常感谢。

试用-1，替换为&＃013或\\\

Trial-1, replace with "&#013" or "\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） 在Bootstrap 3中向工具提示添加换行符

also tried add .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);
 }

推荐答案

，引用如何使Twitter引导工具提示有多行？ / a>

I just figured it out myself, after referencing How to make Twitter bootstrap tooltips have multiple lines?

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

I have to change below 2 places:

\ n 为< br />

1. code> .attr（data-html，true）

1. change \n to be <br />
2. add attribute .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圆标题tooltipText的换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！