D3.js package placement circles overlap

Question

I have a problem with layout d3.js. The circles overlap and I don't know why ...

I used the code from this example:

http://mbostock.github.com/d3/talk/20111116/pack-hierarchy.html

And this is my job:

http://projekty.bron.it/d3-circles-all/

As you can see, overlapping makes the chart unusable.

Answer 1

I tried to implement the same example of wrapping circles and had overlapping circles. For me, the problem was that the parent data nodes had 0 children and size 0. As soon as I changed the parent nodes with an empty array of children to properly formatted leaves, the problem disappeared.

Bad overlap in front of the data structure:

root = {name:"root", children:[ {name:"badchildlessparent", children:[]}, {name:"parentnodewithchild", children:[{name:"a leaf",size=50}]} ] } 

Perfect packaging after data structure:

 root = {name:"root", children:[ {name:"fixedit_now_child", size=1} , {name:"parentnodewithchild", children:[{name:"a leaf",size=50}]} ] } 

Answer 2

Which helped me with the following: reorder the process by sorting

so do you have

 var pack = d3.layout.pack() .size([r,r]) .value(function(d) { return d.size; }); 

add

 var pack = d3.layout.pack() .sort(d3.descending) .size([r,r]) .value(function(d) { return d.size; });