I had a question in the comments for the treemap label wrapping post about how to go about truncating the labels within the d3 Circle Pack example from Mike Bostock. Here is what I came up with. For the sake of brevity, I used the SVG text element so you get truncation but not wrapping. I’m sure the math could be improved at bit but it works well enough for this example:
Circle Pack Label Truncation
You can find the Gist here.
Hi Bill
Many thanks for this post – it solved exactly what I was looking for.
Your assistance is much appreciated!
Regards
Simone
Hi Bill
Me again…
I am currently using the Zoomable Icicle layout example found here: http://bl.ocks.org/mbostock/1005873
I have added labels to the layout and would like to truncate the labels as you have done for the treemap and circle layout. The problem comes in when I rotate the labels according to space (so if a “block” is too narrow, the label will be rotated 90′ and if it is wide enough on zoom it will be rotated back to 0′). Once the layout is zoomed out totally then some labels that have been rotated 90′ become hidden (when initially on load, they were rotated but truncated i.e. visible).
Is there any way you are able to assist with this? I just need labels added to the layout, which are rotated if the “block” is too narrow (and recalculated on zoom), and then truncated similarly to the circle and treemap.
Many thanks.
I’ll take a look and get back to
you a few days 🙂
Simone: Sorry for taking so long in getting back to you on this. Do you have a code sample you are working with you can post on JSFiddle (or some place similar) that I can look at to see the problem in action?
http://bl.ocks.org/billdwhite/7207695