圈子中的d3.layout.pack文本会覆盖其他圈子中的其他文本

Question

I'm using d3.layout.pack to place circles inside other main circle, like in http://mbostock.github.io/d3/talk/20111018/pack.html

But i have larger texts inside circles that override the circle and can override another text in a near circle:

The solutions I can think are:

• cut text for not to override the circle
• put smaller font for the circles.
• set greater padding
• put a tooltip onmouseover the circle
• rotate text??

But that ideas doesn't satisfy me too much. I will like for example in this case to place the two smaller balls more spaced.

Can d3.layout.pack do some more interesting avoiding the circle overriding?

Can I use d3.layout.force for this? Any ideas?

Answer 1

I would suggest as one of possibilities the answer to question 'Text along a circle in a D3 circle pack layout' :

jsfiddle

Basically, the idea is to draw labels along the circles instead in the centers of the circles. Also, you might consider drawing only some of the labels at the time - those that belong to small circles maybe should be omitted.