Skip to content

Commit a29c802

Browse files
mbostockmbostock
committed
Sort for layout, but don't reorder.
This fixes a bug in the pie layout sorting where we want the sort order to affect the layout, but not the order in which arcs are rendered—and furthermore we want the order of arcs to always match the order of data. (If you want to sort the data, do that before it is passed to the layout.)
1 parent ade083d commit a29c802

8 files changed

Lines changed: 39 additions & 21 deletions

File tree

‎d3.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
(function(){d3 = {version: "1.2.0"}; // semver
1+
(function(){d3 = {version: "1.2.1"}; // semver
22
if (!Date.now) Date.now = function() {
33
return +new Date();
44
};

‎d3.layout.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -168,8 +168,11 @@ d3.layout.pie = function() {
168168
? endAngle.apply(this, arguments)
169169
: endAngle) - startAngle;
170170

171-
// Optionally sort (a copy of) the data.
172-
if (sort != null) data = data.slice().sort(sort);
171+
// Optionally sort the data.
172+
var index = d3.range(data.length);
173+
if (sort != null) index.sort(function(i, j) {
174+
return sort(data[i], data[j]);
175+
});
173176

174177
// Compute the numeric values for each data element.
175178
var values = data.map(value);
@@ -178,13 +181,18 @@ d3.layout.pie = function() {
178181
k /= values.reduce(function(p, d) { return p + d; }, 0);
179182

180183
// Compute the arcs!
181-
return values.map(function(d, i) {
184+
var arcs = index.map(function(i) {
182185
return {
183-
value: d,
186+
value: d = values[i],
184187
startAngle: a,
185188
endAngle: a += d * k
186189
};
187190
});
191+
192+
// Return the arcs in the original data's order.
193+
return data.map(function(d, i) {
194+
return arcs[index[i]];
195+
});
188196
}
189197

190198
/**

‎d3.layout.min.js‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎d3.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/pie/pie-transition.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,16 @@
2020
data = d3.range(10).map(Math.random),
2121
color = d3.scale.category20(),
2222
arc = d3.svg.arc().outerRadius(r),
23-
donut = d3.layout.pie().sort(d3.descending);
23+
donut = d3.layout.pie();
2424

2525
var vis = d3.select("body")
2626
.append("svg:svg")
27+
.data([data.sort(d3.descending)])
2728
.attr("width", w)
2829
.attr("height", h);
2930

3031
var arcs = vis.selectAll("g.arc")
31-
.data(donut(data))
32+
.data(donut)
3233
.enter().append("svg:g")
3334
.attr("class", "arc")
3435
.attr("transform", "translate(" + r + "," + r + ")");

‎examples/pie/pie.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,12 @@
2424

2525
var vis = d3.select("body")
2626
.append("svg:svg")
27+
.data([data])
2728
.attr("width", w)
2829
.attr("height", h);
2930

3031
var arcs = vis.selectAll("g.arc")
31-
.data(donut(data))
32+
.data(donut)
3233
.enter().append("svg:g")
3334
.attr("class", "arc")
3435
.attr("transform", "translate(" + r + "," + r + ")");

‎src/core/core.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
d3 = {version: "1.2.0"}; // semver
1+
d3 = {version: "1.2.1"}; // semver

‎src/layout/pie.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,11 @@ d3.layout.pie = function() {
1616
? endAngle.apply(this, arguments)
1717
: endAngle) - startAngle;
1818

19-
// Optionally sort (a copy of) the data.
20-
if (sort != null) data = data.slice().sort(sort);
19+
// Optionally sort the data.
20+
var index = d3.range(data.length);
21+
if (sort != null) index.sort(function(i, j) {
22+
return sort(data[i], data[j]);
23+
});
2124

2225
// Compute the numeric values for each data element.
2326
var values = data.map(value);
@@ -26,13 +29,18 @@ d3.layout.pie = function() {
2629
k /= values.reduce(function(p, d) { return p + d; }, 0);
2730

2831
// Compute the arcs!
29-
return values.map(function(d, i) {
32+
var arcs = index.map(function(i) {
3033
return {
31-
value: d,
34+
value: d = values[i],
3235
startAngle: a,
3336
endAngle: a += d * k
3437
};
3538
});
39+
40+
// Return the arcs in the original data's order.
41+
return data.map(function(d, i) {
42+
return arcs[index[i]];
43+
});
3644
}
3745

3846
/**

0 commit comments

Comments
 (0)