パスのd属性の有効なデータを再生成できません

Question

私は円グラフで最初のセクターセットを作成すると素晴らしい結果が得られます。特に、各経路の属性dが正しく設定されている。

次に、同じパターンを使用して新しい内側の円グラフを追加しようとします。 DOM構造を調べることで確認できる要素が作成されます。しかし、それらは表示されず、JsFiddleのコンソールには表示されませんが、NaNがたくさんあります。

var gry = chart.selectAll(".subSector").data(pie(drillData)) 
    .enter().append("g").attr("class", "subSector"); 
gry.append("path").attr("d", sub) 
    .style("fill", function(d) {return colorsDrill(d.value); }); 

私はパスのデータが無効ですが、どのように間違っているのか分かりません。提案？

フィドルはhereです。

Answer 1

drillDataは、pie関数に渡す正しい形式ではありません。それは次のようになります。

[ 
    { 
    "key": "Category 1", 
    "val": [{ "Category": "", "Key": "", Value: 1}, ... ] 
    } 
    ... 
] 

あなたのパイの機能、しかし、数、ない配列（これは.valueが何をするかである）のプロパティvalとオブジェクトの配列を期待しています。あなたは今、プロパティ数です値とsubDataにオブジェクトの配列を持っている

var subData = null; 
drillData.forEach(function(d,i){ 
    if (d.key === key) subData = drillData[i].val; 
}); 

：私は推測している

はあなたのdrillDataあなたが何かをクリックしたものにサブセットする必要があります。私たちは近づいているが、それは、バリューヴァルはない期待していますので、今、私たちはパイの機能を再定義する必要があります。

pie.value(function(d){ 
    return d.Value; 
}); 

だから、今、私たちは最終的に呼び出すことができます。

pie(subData) 

エラーなし。 でもまだ問題はありますが、今度は300以上のウェッジを持つ内側のドーナツチャートを作成しようとしています。

ここには私が物事を修正し始めたupdated fiddleがあります。