Nur eine SVG-Komponente gerendert, wenn eine Methode zweimal aufgerufen wird

Question

Ich benutze eine Funktion, um Event-Handler für einen Klick einzurichten und wie es ausgelöst wird, geht die Wiedergabe wie erwartet (auf dem äußeren Steuerelement einklappen und auf dem inneren ausklappen) ein). Wenn Sie dann erneut darauf klicken, wird der Prozess zurückgezogen. Wenn ich die Operation das nächste Mal ausführe, ändert nur die äußere Komponente ihre Größe, während die innere nicht betroffen wird.

function pieClickOuter(target) { 
    var pie = d3.layout.pie() 
    .startAngle(0).endAngle(2 * Math.PI) 
    .value(function (d) { return d.val; }); 
    var out = d3.svg.arc().innerRadius(90).outerRadius(99); 
    var org = d3.svg.arc().innerRadius(1).outerRadius(1); 
    var sub = d3.svg.arc().innerRadius(10).outerRadius(80)); 

    d3.selectAll("#chart .sector path") 
    .transition().duration(1500).attr("d", out); 

    var grx = _.chart.selectAll(".subSector") 
    .data(pie(getData())).enter().append("g") 
    .attr("class", "subSector") 
    .on("click", pieClickInner); 

    grx.append("path") 
    .attr("d", org).style("fill", function (d) { return colors(d.value); }); 
    grx.selectAll("#chart .subSector path") 
    .transition().duration(1000).attr("d", sub); 
} 

function pieClickInner() { 
    d3.selectAll("#chart .sector path") 
    .transition().duration(1500) 
    .attr("d", d3.svg.arc().innerRadius(80).outerRadius(99)); 

    outerPieEvents(d3.selectAll("#chart .sector")); 

    d3.selectAll("#chart .subSector path") 
    .transition().duration(1000) 
    .attr("d", d3.svg.arc().innerRadius(1).outerRadius(1)); 
} 

Ich kann nicht für mein Leben sehen, warum. Entsprechend der Konsolenausgabe werden alle Schritte ausgeführt, so dass die Ereignisse anscheinend korrekt neu eingerichtet werden. Dennoch scheint die innere Komponente ungehorsam zu sein.

Siehe this fiddle

Answer 1

Ich glaube, dass Sie something like this wollen.

Ich änderte nur 1 name:

var grx = _.chart.selectAll(".subSector") 

zu

var grx = _.chart.selectAll(".foo")//or any other name 

so wählen wir nicht, was bereits vorhanden ist.

Das Problem mit diesem Ansatz ist, dass Ihr SVG mehr und mehr Gruppen mit jedem Klick hat. Aber Sie können dies vermeiden, sie in Ihrem pieClickInner() entfernen:

d3.selectAll("#chart .subSector path") 
    .transition().duration(1000) 
    .attr("d", d3.svg.arc().innerRadius(1).outerRadius(1)).remove(); 
d3.selectAll("#chart .subSector text").attr("opacity", 0).remove(); 
d3.selectAll("g.subSector").transition().duration(1000).remove(); 

Ich persönlich mag es nicht remove(), ich würde einfach die Daten erneut binden.