The easiest way to transition between pie charts with differently-sized datasets (while maintaining object constancy) is to set the missing values to zero.
function type(d) {
d.apples = +d.apples || 0;
d.oranges = +d.oranges || 0;
return d;
}Next: Static Data-Join
Previous: Animation
| apples oranges | |
| 53245 200 | |
| 28479 | |
| 19697 200 | |
| 24037 | |
| 40245 200 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| margin: auto; | |
| position: relative; | |
| width: 960px; | |
| } | |
| text { | |
| font: 10px sans-serif; | |
| } | |
| form { | |
| position: absolute; | |
| right: 10px; | |
| top: 10px; | |
| } | |
| </style> | |
| <form> | |
| <label><input type="radio" name="dataset" value="apples" checked> Apples</label> | |
| <label><input type="radio" name="dataset" value="oranges"> Oranges</label> | |
| </form> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 50, | |
| radius = Math.min(width, height) / 2; | |
| var color = d3.scale.category20(); | |
| var pie = d3.layout.pie() | |
| .value(function(d) { return d.apples; }) | |
| .sort(null); | |
| var arc = d3.svg.arc() | |
| .innerRadius(radius - 10) | |
| .outerRadius(radius - 20); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| d3.tsv("data.tsv", type, function(error, data) { | |
| var path = svg.datum(data).selectAll("path") | |
| .data(pie) | |
| .enter().append("path") | |
| .attr("fill", function(d, i) { return color(i); }) | |
| .attr("d", arc) | |
| .each(function(d) { this._current = d; }); // store the initial angles | |
| d3.selectAll("input") | |
| .on("change", change); | |
| var timeout = setTimeout(function() { | |
| d3.select("input[value=\"oranges\"]").property("checked", true).each(change); | |
| }, 2000); | |
| function change() { | |
| var value = this.value; | |
| clearTimeout(timeout); | |
| pie.value(function(d) { return d[value]; }); // change the value function | |
| path = path.data(pie); // compute the new angles | |
| path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs | |
| } | |
| }); | |
| function type(d) { | |
| d.apples = +d.apples || 0; | |
| d.oranges = +d.oranges || 0; | |
| return d; | |
| } | |
| // Store the displayed angles in _current. | |
| // Then, interpolate from _current to the new angles. | |
| // During the transition, _current is updated in-place by d3.interpolate. | |
| function arcTween(a) { | |
| var i = d3.interpolate(this._current, a); | |
| this._current = i(0); | |
| return function(t) { | |
| return arc(i(t)); | |
| }; | |
| } | |
| </script> |
