如何用勾号包裹 D3 标签

Question

我试图让我的标签正确包装。我需要让刻度和标签匹配。我正在为标签使用包装功能，但无法使其与 tspans 一起使用。

工作演示

更新

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

Answer 1

遗憾的是，没有简单的方法可以<text>像 HTML 中那样对 SVG 元素的内容进行换行。不过，我确实找到了类似问题的答案，该问题建议使用D3 Plus库向 D3 添加文本换行。

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

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

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