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

Question

我似乎无法将我的工具提示格式化为 4 个单独的行。我有一个 p 元素，想将其分解。我试过添加 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() 的方式