Can you insert a line break in text when using d3.js? [duplicate]

I'm looking for a way to use a line break within a tooltip text element using d3.js.

.text("test" +  "</br>" + "test")

The above, and other similar efforts, don't seem to work.

There's a thread here that seems to answer it:

https://groups.google.com/forum/?fromgroups=#!topic/d3-js/GgFTf24ltjc

but the solution isn't very clear. How would .html be used in the above situation?

.text(.html("test" + "" + "test"))

didn't work?

Thanks

Solution 1:

Since you already know where you want to break the text, you could consider just adding separate elements.

.append("text")
  .attr("dy", "0em")
  .text("line 1")   // "line 1" or whatever value you want to add here.

And then for the second line, just add an offset

.append("text")
  .attr("dy", "1em") // you can vary how far apart it shows up
  .text("line 2")   // "line 2" or whatever value you want to add here.

Solution 2:

Better to use 'tspan' for line 1 and line 2 both with attribure dy = 0em and dy = 1.2em