更新时间:2023-08-30 20:33:57
您有以下选项。
cb> c> c / c> $ c> text
元素的效果相同。同样,您必须自行设置间距。 foreignObject
嵌入合适的HTML元素(例如 div
),它会照顾你的线断裂,间距等。对于其示例,参见例如此处。我会使用HTML嵌入选项,除非你有特定的原因不。它使实际文本格式比其他选项容易得多。
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.
You have the following options.
text
element with the appropriate spacing.tspan
elements within a text
element to the same effect. Again, you would have to set the spacing yourself.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.