Mehrere Kreisdiagramme aktualisieren mit nur einem Eingang d3.js

Question

Ich modifizierte Mike Bostock Pie Chart Update III, um zwei verschiedene Kreisdiagramme in einem mit zwei Elementen mit einer CSV-Datei für jedes Diagramm zu erhalten.

var svg = d3.select("body").append("svg") 
.attr("width", width) 
.attr("height", height); 

var leftG = svg.append("g") 
       .attr("transform", "translate(" + width/4 + "," + height/2 + ")"); 

var rightG = svg.append("g") 
       .attr("transform", "translate(" + 3 * (width/4) + "," + height/2 + ")"); 

Ich möchte jeden Radiobutton haben beide Tortendiagramme zu aktualisieren. Jetzt ist mein Problem, dass die Update-Eingaben nur das zweite Tortendiagramm ändern.

Ich kann nicht herausfinden, wie dies zu tun ist, da die Funktion change() innerhalb der Funktion d3.csv() ist und man nicht auf die andere zugreifen kann.

d3.selectAll("input") 
    .on("change", changeLeft); 

    function changeLeft() { 
    var value = this.value; 
    pieLeft.value(function(d) { return d[value]; }); // change the value function 
    pathLeft = pathLeft.data(pieLeft); // compute the new angles 
    pathLeft.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
    } 

Vielen Dank im Voraus.

EDIT: Hier ist meine plnkr

Answer 1

erklären eine globale Variable

var changeLeft; 

Ersetzen Sie Ihre Funktion mit dem unten ein und es wird funktionieren:

changeLeft = function() { 
     var value = this.value; 
     pieLeft.value(function(d) { return d[value]; }); // change the value function 
     pathLeft = pathLeft.data(pieLeft); // compute the new angles 
     pathLeft.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
     }