同じレイアウトのFirefoxとChromeで円のレイアウトが異なる

Question

次のスクリプトをコンソールで実行していて、FirefoxとChromeで異なる出力を生成しています。まず、トラブルシューティングの数時間後に、私が狂ったかもしれないと感じたので、私はそれを確認するために誰かが必要です。

円は時計回りに反時計回りに1/4回転することになっています。次に、データはソートされるはずです。括弧内には実際のサイズがリストされています。最初のセットの順番は、（角度-1.57から始まる要素を参照してください）、2番目のものはChromeでは間違っていますが、FireFoxでは正しいです。値420とキー3は角度でパイを開始しているため

私は怒っつもりだ教えてください...私はChromeで取得しています

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

間違った出力が（これです - 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キー6（414）：0.6/1.1
キー6（414）キー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>