CODEWITHSUNDEEP
javascriptd3.jsoverlapcircle-pack
krystian
krystian

Reputation: 78

d3.js pack layout circles are overlapping

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.

Upvotes: 4

Views: 2797

Answers (2)

user3008619
user3008619

Reputation: 41

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

Upvotes: 4

user2391495
user2391495

Reputation: 56

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}]}
    ]
}

Upvotes: 4

Related Questions