d3.js pack layout circles are overlapping

Question

I have a problem with d3.js pack layout. The circles are overlapping, and I don't have any idea why...

I used code from this example:

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

And that is my work:

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

As you see overlapping make diagram unusable.

Answer 1

I attempted to implemented the same circle packing example and had overlapping circles, too. For me the problem was cause by the fact that data parent nodes had 0 children and size 0. Once I changed the parent nodes with an empty array of children into correctly formatted leaves, the problem went away.

Bad overlapping before data structure:

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

Nicely packing after data structure:

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

Answer 2

What helped me was the following: change the order of process by sorting

so where 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; });