如何用刻度线包装D3标签 [英] How to wrap D3 labels with ticks

问题描述

我正在尝试使标签正确包装.我需要获取刻度和标签以进行匹配.我在标签上使用了自动换行功能，但无法与tspans配合使用.

解决方案

遗憾的是，没有简单的方法可以像在HTML中那样包装SVG < text> 元素的内容.但是我确实找到了这个类似问题的答案，建议使用WORKING DEMO

UPDATE

Here is before and after picture to help understand what Im after.

解决方案

Sadly there is no simple way to get SVG <text> elements' content to wrap like it would in HTML. However I did find this answer to a similar question which suggests using the D3 Plus library to add text wrapping to D3.

If for some reason that isn't an option you will probably have to calculate the wrapping yourself, it is a bit of a nasty process but is doable with some effort. In general terms you need to:

1. Create an HTML element with the same width and font styles as the target SVG text
2. Add the desired content to this element word-by-word
3. After adding each word check the height of the HTML element, if it has increased you know you need a newline before that word
4. Once you know how many lines it needs use <tSpan> elements to output each line of text (you'll have to manually set the top offset for each new line)

I'd definitely advise using the library though if at all possible!

这篇关于如何用刻度线包装D3标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！