I modified Mike Bostock's Pie Chart Update III in order to get two different pie charts in one using two elements with one csv file for each chart.
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 + ")");
I want to have each radio button updating both pie charts. Now my problem is that the update inputs only alter the second pie chart.
I can't figure out how to do this since the change() function is inside the d3.csv() function and one cannot access the other.
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
}
Thanks in advance.
EDIT : Here is my plnkr
declare a global variable
var changeLeft;
Replace your function with the below one and it will work:
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.