I'm very new to d3 and I'm building a chart using d3.layout.pack.
I would like to place the text labels of every circle outside the circle, but without overlapping other labels or other circles.
Like this: bubble chart using d3.layout.pack
Any ideas?
Thanks a lot
pd: this is what i've tried:
var nodes = d3.layout.pack()
.value(function(d) { return d.size; })
.size([w, h]).padding(333)
.nodes(data);
I would suggest another approach: to place labels/text
along the top of the circles, and only for fairly large circles... This will not solve overlap problem completely, but visual organization will be better, in my opinion.
Here is the jsfiddle of an example illustrating the approach.
The details are described in another SO question/answer
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.