4

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

enter image description here

And that is my work:

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

As you see overlapping make diagram unusable.

VividD
  • 10,456
  • 6
  • 64
  • 111
krystian
  • 53
  • 1
  • 6

2 Answers2

4

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}]}
    ]
}
user2391495
  • 56
  • 2
4

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; });
user3008619
  • 41
  • 1