如何使用 d3.js 文本添加换行符答案

【问题标题】：How to add a line break using d3.js text如何使用 d3.js 文本添加换行符
【发布时间】：2020-07-07 21:29:07
【问题描述】：

我正在尝试将文本添加到我正在创建的树形图中，我希望它像这样进行

Test name
Item Count: 402

怎么打印

Test name Item Count: 402

我的代码是这样的

cells.append("text")
                  .attr("x", d => x(d.x0 + 5) )
                  .attr("y", d => y(d.y0 + 20) )
                  .style("font", "13px sans-serif")
                  .text(d => d.data.name + "  \n Item Count: " + d.data.itemCount)
                  .attr("fill", "black")

感谢您的帮助

【问题讨论】：

标签： javascript d3.js text

【解决方案1】：

不幸的是，这仅在原生 d3 中是不可能的，因为您的换行符不会在 svg 中被识别。

要自动设置这样的东西，你必须使用https://d3-annotation.susielu.com/ 之类的东西并设置适当的bgPadding 属性；这包括设置一个新数组，自定义其相关属性以匹配您的基础数据，以及格式化注释外观。

否则（这可能是一个比在不需要其他功能的情况下跳转到 d3-annotation 更简单的解决方案）您可以为每个单元格附加一个额外的文本元素，因此一个元素显示数据名称，另一个显示数据名称项目计数。其中第二个将从初始值 20 偏移某个数字（在下面的示例中，我只是添加了 10px）：

cells.append("text")
                  .attr("x", d => x(d.x0 + 5) )
                  .attr("y", d => y(d.y0 + 20) )
                  .style("font", "13px sans-serif")
                  .text(d => d.data.name )
                  .attr("fill", "black")
                  
cells.append("text")
                  .attr("x", d => x(d.x0 + 5) )
                  .attr("y", d => y(d.y0 + 30) ) //note each of these is 10px lower
                  .style("font", "13px sans-serif")
                  .text(d => Item Count: " + d.data.itemCount)
                  .attr("fill", "black")

【讨论】：