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

Question

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

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

示例数据

{
    {"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：文本只占用一个文本条目并显示在一行中，所以我添加了更多文本并调整了“dy”？或者回缩收集节点信息并替换？

感谢您的提示。

Answer 1

您有以下选择。

• 正如您所提到的，您可以使用适当的间距添加多个text元素。
• 您还可以在tspan元素中使用多个text元素以达到相同的效果。同样，你必须自己设置间距。
• 您可以使用foreignObject嵌入合适的HTML元素（例如div）来处理断线，间距等问题。举个例子，参见例如here。

我会使用HTML嵌入选项，除非您有特殊原因不这样做。它使实际的文本格式化比其他选项更容易。