How to Hide Overlapping Text of Labels in D3 Zoomable Pack Layout?

Question

I am using the Zoomable Pack Layout provided on the D3 website: http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

All labels of the circles are displayed when the layout is displayed.

The problem is that for small circles which are close together, the labels overlap. I would like to know if there is a way to hide the overlapping text of the labels?

I have read about "foreignobject", but if this is the answer, I am not sure how and where to incorporate it in the code.

Answer 1

You could restrict the display of text based on either the level of the hierarchy, the radius of the circle or a combination of both. Both are in the pack output. Use titles for hover detail.