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

Javascriptd3.js

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDan HarringtonView Question on Stackoverflow
Solution 1 - Javascriptlsu_guyView Answer on Stackoverflow
Solution 2 - JavascriptMadhukar AnandView Answer on Stackoverflow