d3.js包布局圈重叠

Question

我有一个d3.js包布局的问题。圆圈是重叠的，而且我没有任何想法，为什么...

我使用的代码从这个例子：

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

这就是我的工作：

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

正如您看到重叠使图表不可用。

Answer 1

我试图实施相同的圆圈包装示例，并且也有重叠的圆圈。对于我来说，问题是由于数据父节点有0个子节点和大小为0的事实造成的。一旦我将具有空子节点的子节点的父节点更改为格式正确的树叶，问题就消失了。

坏重叠的数据结构前：

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

数据结构之后精美包装：

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

Answer 2

什么帮助我的是以下内容：通过排序

因此，变革过程的顺序你有

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