d3 Circle Pack Label Truncation

By | October 28, 2013

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.

5 thoughts on “d3 Circle Pack Label Truncation

  1. Simone

    Hi Bill

    Many thanks for this post – it solved exactly what I was looking for.

    Your assistance is much appreciated!


  2. 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.

    1. Bill Post author

      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?


Leave a Reply

Your email address will not be published. Required fields are marked *