line break for d3 circle title tooltipText

Question

Я использую svg d3, когда 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 линии с сырым текстом?

i.e. \n получил интерпретацию. Я предполагаю, что изменение backend-ответа не поможет, поскольку это ошибка уровня представления.

Большое спасибо.

Trial-1, заменить "& # 013" или "\ 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); 
}