如何在D3.js中动态显示多行文本？ [英] How to dynamically display a multiline text in D3.js?

问题描述

我需要在SVG中显示多行文本：使用D3.js的文本。

样本数据如下所示，我要显示all

示例数据

$ b b

  {
 {author：Author1，group：fiction，books：[
 {title： Book Title1，rating：3}，
 {title：Book Title2，rating：4} 
] ，group：non-fiction，books：[
 {title：Book Title3，rating：3}，
]} 
} 
  

SVG：text只需要一个文本输入并显示在一行，所以我添加更多的文本和调整dy？或缩进collec节点信息并替换？

解决方案

您有以下选项。

• 如前所述，您可以添加多个 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.

• 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.

这篇关于如何在D3.js中动态显示多行文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！