如何在D3.js中动态显示多行文本？

Question

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

示例数据如下所示，我想为每个作者在单个节点下显示“所有”标题，而不是在强制方向布局中显示为单个节点。

样本数据

{
    {"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仅需要输入一个文本并显示在一行中，因此我添加了更多文本并调整了“ dy”？还是收回节点信息并替换？

感谢您的提示。

Answer 1

您有以下选择。

• 如前所述，您可以添加多个text具有适当间距的元素。
• 您还可以tspan在一个元素内使用多个html" target="_blank">元素text来达到相同的效果。同样，您将必须自行设置间距。
• 您可以foreignObject用来嵌入合适的HTML元素（例如div），以便为您处理换行，间隔等问题。有关示例，请参见此处。

除非您有特殊原因，否则我会选择HTML嵌入选项。它使实际的文本格式比其他选项容易得多。