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()

的方式

Answer 2

只是对other answer的补充：

您可以在此处使用html()或text()方法。它们之间的区别在于text()使用textContent，而html()使用innerHTML。

我们可以在text()的{{3}}上看到它：

this.textContent = value;

在html()的{{3}}处：

this.innerHTML = value;

因此，每种方法都有其特殊性。

使用html（）

正如已经说明的，您可以将html()与<br>一起使用：

d3.select("p").html("Line 1: " + "this is line 1" + "<br>" + "line 2: " + "this is line 2");

<p></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

使用text（）

要使用text()方法，就像在代码中一样，您必须为source code选择适当的值，例如pre：

var p = d3.select("p");
p.text("Line 1: " + "this is line 1" + "\n" + "line 2: " + "this is line 2");

p {
  white-space: pre;
}

<p></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

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

2 个答案: