如何使用 D3.js 在 HTML 元素中创建换行符

Question

我似乎无法将工具提示格式化为 4 行。我有 ap 元素并想将其分解。我尝试添加 br 和 \n 但它们似乎没有帮助。

var tooltip = d3.select("body")
    .append("div")
    .attr('class', 'tooltip');

tooltip.append("p");

//这里我使用 selectAll 和追加圆圈来浏览我的数据。“.on”属性是当我将鼠标悬停在圆圈上时我想看到工具提示

.on("mousemove", function(d){

if (d.source == "target") {              
    tooltip.select("p").text(d.source);
} else {                       
    tooltip.select("p").text("Line 1: " + "this is line 1" + "\n" + "line 2: " + "this is line 2");
}

Answer 1

不要使用.text()，而是使用.html()，这样你就可以<br>像这样使用：

tooltip.select("p").html("Line1: this is line 1 <br> line 2: this is line 2");

如果这不起作用，请尝试

tooltip.select("p").html(function(){
    return "Line 1: this is line 1 <br> line 2: this is line 2"
});

因为这就是我目前使用的方式.html()