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开始的那个）。对于第一组，对于任何浏览器，订单始终是正确的，据我所知。我看不出这些数据集之间有任何相关的差异。

第1类（14660）：0.71 / 1.73
  第2类（5264）：4.35 / 4.71
  第3类（17020）： - 1.57 / -0.39
  第4类（8076）：2.99 / 3.55
  第5类（5497）：3.96 / 4.35
  第6类（15833）： - 0.39 / 0.71
  第7类（5906）：3.55 / 3.96
  第8类（8331）：2.41 / 2.99
  第9类（9775）：1.73 / 2.41

键10（414）： - 01 / -0.58
  键11（246）：4.13 / 4.42
  键12（489）： - 0.58 / 0.01
  键13（241）：4.42 / 4.71
  关键14（332）：3.03 / 3.43
  第15（368）条：2.16 / 2.6
  键16（322）：3.43 / 3.81
  键3（420）： - 1.57 / -1.07
  关键4（494）：1.1 / 1.69
  关键5（269）：3.81 / 4.13
  键6（414）：0.6 / 1.1
  键7（363）：2.6 / 3.03
  键8（497）：0.01 / 0.6
  键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中获得相同的值。检查代码段：

＆＃13;

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);});

＆＃13;

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

＆＃13;

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

1 个答案: