饼图布局在 Firefox 和 Chrome 上对同一数据集产生不同的排序

Question

我在控制台中运行以下脚本，它在 Firefox 和 Chrome 中产生不同的输出。首先，我需要有人来验证它，因为经过几个小时的故障排除，我觉得我可能疯了。

饼图应该逆时针旋转四分之一，因此会有偏移。然后，应该对数据进行排序。我在括号中列出了实际尺寸。第一组的顺序是应该的（见以角度 -1.57 开头的元素），而第二组在 Chrome 中是错误的，但在 FireFox 中是正确的。

请告诉我我要疯了...

var offset = -Math.PI / 2;
var pie = d3.layout.pie()
  .sort(function (a, b) { return a.val < b.val; })
  .startAngle(offset).endAngle(2 * Math.PI + offset)
  .value(function (d) { return d.val; });

var points1 = [
  {key: "Cat 1", val: 14660}, {key: "Cat 2", val: 5264}, {key: "Cat 3", val: 17020},
  {key: "Cat 4", val: 8076}, {key: "Cat 5", val: 5497}, {key: "Cat 6", val: 15833},
  {key: "Cat 7", val: 5906}, {key: "Cat 8", val: 8331}, {key: "Cat 9", val: 9775}
];

var points2 = [
  {key: "Key 10", val: 414}, {key: "Key 11", val: 246}, {key: "Key 12", val: 489},
  {key: "Key 13", val: 241}, {key: "Key 14", val: 332}, {key: "Key 15", val: 368},
  {key: "Key 16", val: 322}, {key: "Key 3", val: 420}, {key: "Key 4", val: 494},
  {key: "Key 5", val: 269}, {key: "Key 6", val: 414}, {key: "Key 7", val: 363},
  {key: "Key 8", val: 497}, {key: "Key 9", val: 395}
];

points1.forEach(function(e){ console.log(e); })
pie(points1).forEach(function(e){
  console.log(e.data.key + "(" + e.data.val + "): " 
    + Math.round(e.startAngle * 100) / 100 + " / " 
    + Math.round(e.endAngle * 100) / 100);});

points2.forEach(function(e){ console.log(e); })
pie(points2).forEach(function(e){
  console.log(e.data.key + "(" + e.data.val + "): " 
    + Math.round(e.startAngle * 100) / 100 + " / " 
    + Math.round(e.endAngle * 100) / 100);});

我在 Chrome 上得到的错误输出是这样的（因为值为 420 的 Key 3 以角度 -1.57 开始饼图）。在 FireFox 上它是正确的（即 Key 8 值为 497 是从角度 -1.57 开始的那个）。对于第一组，顺序总是正确的，对于任何浏览器，据我所知。我看不出这些数据集之间有任何相关差异。

Category 1(14660): 0.71 / 1.73
Category 2(5264): 4.35 / 4.71
Category 3(17020): -1.57 / -0.39
Category 4(8076): 2.99 / 3.55
Category 5(5497): 3.96 / 4.35
Category 6(15833): -0.39 / 0.71
Category 7(5906): 3.55 / 3.96
Category 8(8331): 2.41 / 2.99
Category 9(9775): 1.73 / 2.41

Key 10(414): -1.07 / -0.58
Key 11(246): 4.13 / 4.42
Key 12(489): -0.58 / 0.01
Key 13(241): 4.42 / 4.71
Key 14(332): 3.03 / 3.43
Key 15(368): 2.16 / 2.6
Key 16(322): 3.43 / 3.81
Key 3(420): -1.57 / -1.07
Key 4(494): 1.1 / 1.69
Key 5(269): 3.81 / 4.13
Key 6(414): 0.6 / 1.1
Key 7(363): 2.6 / 3.03
Key 8(497): 0.01 / 0.6
Key 9(395): 1.69 / 2.16

Answer 1

如果不是这个...

.sort(function (a, b) { return a.val < b.val; })

...我这样写：

.sort(function (a, b) { return d3.descending(a.val, b.val) })

我在 Chrome 和 Firefox 中获得相同的值。检查代码段：

var offset = -Math.PI / 2;
var pie = d3.layout.pie()
  .sort(function (a, b) { return d3.descending(a.val, b.val) })
  .startAngle(offset).endAngle(2 * Math.PI + offset)
  .value(function (d) { return d.val; });

var points1 = [
  {key: "Cat 1", val: 14660}, {key: "Cat 2", val: 5264}, {key: "Cat 3", val: 17020},
  {key: "Cat 4", val: 8076}, {key: "Cat 5", val: 5497}, {key: "Cat 6", val: 15833},
  {key: "Cat 7", val: 5906}, {key: "Cat 8", val: 8331}, {key: "Cat 9", val: 9775}
];

var points2 = [
  {key: "Key 10", val: 414}, {key: "Key 11", val: 246}, {key: "Key 12", val: 489},
  {key: "Key 13", val: 241}, {key: "Key 14", val: 332}, {key: "Key 15", val: 368},
  {key: "Key 16", val: 322}, {key: "Key 3", val: 420}, {key: "Key 4", val: 494},
  {key: "Key 5", val: 269}, {key: "Key 6", val: 414}, {key: "Key 7", val: 363},
  {key: "Key 8", val: 497}, {key: "Key 9", val: 395}
];

points1.forEach(function(e){ console.log(e); })
pie(points1).forEach(function(e){
  console.log(e.data.key + "(" + e.data.val + "): " 
    + Math.round(e.startAngle * 100) / 100 + " / " 
    + Math.round(e.endAngle * 100) / 100);});

points2.forEach(function(e){ console.log(e); })
pie(points2).forEach(function(e){
  console.log(e.data.key + "(" + e.data.val + "): " 
    + Math.round(e.startAngle * 100) / 100 + " / " 
    + Math.round(e.endAngle * 100) / 100);});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>

饼图布局在 Firefox 和 Chrome 上对同一数据集产生不同的排序

Pie layout produces different ordering on Firefox and Chrome for the same dataset

javascript

google-chrome

firefox

d3.js

pie-chart