gpt4 book ai didi

javascript - 如何用刻度包裹 D3 标签

转载 作者:行者123 更新时间:2023-12-03 17:09:37 26 4
gpt4 key购买 nike

我正试图让我的标签正确包装。我需要让刻度和标签匹配。我正在为标签使用包装功能,但无法使其与 tspan 一起使用。
SCREENSHOT
WORKING DEMO
更新
这是之前和之后的图片,以帮助了解我之后的内容。
BEFORE AFTER

最佳答案

遗憾的是,没有简单的方法来获取 SVG <text>像在 HTML 中一样包装元素的内容。但是我确实找到了 this answer to a similar question建议使用 D3 Plus库以将文本换行添加到 D3。
如果由于某种原因这不是一个选项,您可能必须自己计算包装,这是一个有点讨厌的过程,但通过一些努力是可行的。一般来说,您需要:

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

  • 如果可能的话,我肯定会建议使用图书馆!

    关于javascript - 如何用刻度包裹 D3 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66465292/

    26 4 0