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

追加

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