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

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