d3.js包布局圈重叠

Question

我的d3.js包布局有问题。圆圈重叠，我不知道为什么......

我使用了此示例中的代码：

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

这是我的工作：

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

如您所见，重叠的制图无法使用。

Answer 1

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

更改流程的顺序

所以你有

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

添加

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

Answer 2

我尝试实施相同的圆形包装示例，并且也有重叠的圆圈。对我来说，问题是由于数据父节点有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}]}
    ]
}