d3 圆标题工具提示文本的换行符 [英] line break for d3 circle title tooltipText

问题描述

我正在使用 d3 的 svg，当圆标题的 tooltipText 为line1 line2"时，该行不会分成 2，而只是显示原始文本line1 line2".

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

尝试在工具提示中添加换行符和使用d3.js时可以在文本中插入换行符吗?，但不工作

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

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

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

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

非常感谢.

Trial-1，替换为&#013"或u000d"

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
line2"
 // 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 中为工具提示添加换行符

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("\n", "&#013"); 
 if (tooltipText) {
   node.select("circle")
     .attr("data-html", "true")
     .attr("title", tooltipText);
 }

推荐答案

参考 如何让 Twitter 引导工具提示有多行?

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

I have to change below 2 places:

1. 将 改为

2. 添加属性.attr("data-html", "true")

1. change 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 圆标题工具提示文本的换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！