score:1

just as a complement to the other answer:

you can use either html() or text() methods here. the difference between them is that text() uses textcontent, while html() uses innerhtml.

we can see this at the source code for text():

this.textcontent = value;

and this at the source code for html():

this.innerhtml = value;

therefore, each method has its particularities.

using html()

as already explained, you can use html() with <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>

using text()

for using the text() method, just as in your code, you have to select an adequate value for white-space, like 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>

score:3

instead of using .text(), use .html(), that way you can use <br> like so:

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

if that doesn't work, try

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

as this is how i currently use .html()


Related Query

More Query from same tag