一尘不染

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

json

我需要使用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”?还是收回节点信息并替换?

感谢您的提示。


阅读 330

收藏
2020-07-27

共1个答案

一尘不染

您有以下选择。

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

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

2020-07-27