如何用刻度包裹 D3 标签

Question

我正在尝试正确包装我的标签。我需要让刻度和标签匹配。我正在为标签使用 wrap 函数，但无法让它与 tspan 一起使用。

WORKING DEMO

更新

这是之前和之后的图片，以帮助了解我之后的内容。

Answer 1

遗憾的是，没有简单的方法可以让 SVG <text> 元素的内容像在 HTML 中那样包装。不过我确实找到了this answer to a similar question，它建议使用D3 Plus 库将文本换行添加到D3。

如果由于某种原因这不是一个选项，您可能不得不自己计算包装，这是一个有点讨厌的过程，但通过一些努力是可行的。一般来说，您需要：

1. 创建一个与目标 SVG 文本具有相同宽度和字体样式的 HTML 元素
2. 将所需内容逐字添加到此元素中
3. 添加每个单词后检查 HTML 元素的高度，如果它增加了，您就知道在该单词之前需要一个换行符
4. 一旦您知道需要多少行，就使用<tSpan> 元素来输出每一行文本（您必须手动设置每一行的顶部偏移）

如果可能的话，我绝对建议使用该库！