How to dynamically display a multiline text in D3.js?
d3.js, json, svg
Solution
You have the following options.
- You can, as you've mentioned, add more than one `text` element with the appropriate spacing.
- You can also use multiple `tspan` elements within a `text` element to the same effect. Again, you would have to set the spacing yourself.
- You can use `foreignObject` to embed a suitable HTML element (e.g. a `div`) that will take care of the line breaking, spacing etc. for you. For an example of that, see e.g. here.
I would go with the HTML embedding option unless you have a specific reason not to. It makes the actual text formatting so much easier than the other options.
Problem
I need to display a multiline text in a SVG:Text using D3.js. The sample data looks as follows and I want to display "all" the "titles" under a single node for every author and not as an individual node in a force directional layout. Sample data ``` { {"author":"Author1", "group":"fiction", "books" : [ {"title":"Book Title1", "rating":3}, {"title":"Book Title2", "rating":4} ]}, {"author":"Author2", "group":"non-fiction", "books" : [ {"title":"Book Title3", "rating":3}, ]} } ``` SVG:text takes only one text entry and displays in a single line, so I have add more text and adjust the "dy"? or retractively collec node information and replace? Thanks for the tips.