如何用刻度包裹 D3 标签

Posted 2023-03-05

【中文标题】如何用刻度包裹 D3 标签

【英文标题】：How to wrap D3 labels with ticks

【发布时间】：2021-06-02 12:36:37

【问题描述】：

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

WORKING DEMO

更新

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

【问题讨论】：

在饼图旁边添加一个“图例”块（颜色和标签）。在饼图段悬停时显示标签

你能添加一张你想要达到的目标的照片吗？

请给我几分钟

@UmeshMaharshi 请查看更新

我认为这可能会对您有所帮助：***.com/questions/37662554/…

【参考方案1】：

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

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

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

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