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 元素(例如 div )，它将为您处理换行、间距等。有关示例，请参见例如here .

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