Pie layout производит различные заказы на 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 это (потому что Key 3 со значением 420 начинает пирог под углом - 1,57). В FireFox это правильно (т. Е. Ключ 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): -1,07/-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.Проверьте фрагмент кода:

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>