如何在 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 元素。
• 您还可以在text 元素中使用多个tspan 元素以达到相同的效果。同样，您必须自己设置间距。
• 您可以使用foreignObject 嵌入合适的HTML 元素（例如div），它会为您处理换行、间距等问题。有关示例，请参见例如here。

除非您有特定的理由不这样做，否则我会选择 HTML 嵌入选项。它使实际的文本格式比其他选项容易得多。