Gültige Daten für d-Attribut eines Pfads können nicht erneut erstellt werden.

Question

Wenn ich die erste Gruppe von Sektoren in meinem Kreisdiagramm erzeuge, funktioniert das großartig. Insbesondere ist das Attribut d jedes Pfades korrekt eingestellt.

Dann versuche ich, das gleiche Muster zu verwenden, um ein neues, inneres Kreisdiagramm hinzuzufügen. Die Elemente werden erstellt, was ich durch Untersuchung der DOM-Struktur bestätigen kann. Sie werden jedoch nicht angezeigt und obwohl es nicht in der Konsole des JsFiddle angezeigt wird, habe ich eine Menge NaN bekommen.

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

So, ich habe eine ungültige Daten für den Pfad, aber ich kann nicht sehen, wie es schief geht. Vorschläge?

Die Geige ist here.

Answer 1

Ihr drillData hat nicht das richtige Format, um an Ihre pie-Funktion weitergeleitet zu werden. Es sieht wie folgt aus:

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

Ihre Torte Funktion, obwohl, ist ein Array von Objekten mit einer Eigenschaft val erwarten, dass ein Nummer, kein Array (das ist, was die .value tut).

Ich vermute, Sie müssen Ihre drillData dem einen der Teilmenge Sie auf so etwas wie angeklickt:

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

Sie haben jetzt in subData ein Array von Objekten mit einer Eigenschaft Wert, dass eine Reihe ist. Wir nähern, aber jetzt müssen wir unsere Kuchen Funktion neu zu definieren, da es erwartet val, nicht Wert:

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

So, jetzt können wir endlich nennen:

pie(subData) 

ohne Fehler. Aber, wir haben immer noch ein Problem, jetzt versuchen Sie ein inneres Donut-Diagramm mit 300+ Wedges zu bauen (es wird nicht schön sein).

Hier ist ein updated fiddle, wo ich begann, Dinge zu reparieren.