d3.jsカスタムカラー奇妙な動作 - 勾配の問題

Question

d3.jsの奇妙な動作について質問があります。私は、円グラフでグラデーションを作成したいと私は2つのソリューションを使用：ここ

var data = 
[1,1,1,1,1,1,1,1,1,1,  
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1]; 


    var length = 100; 
    var color = d3.scale.linear().domain([1,length]) 
    .interpolate(d3.interpolateHcl) 
    .range([d3.rgb("#5C97C1"), d3.rgb('#FFC357')]); 

// var color = d3.scale.ordinal() 
// .domain(data) 
// .range(
// ["#5C97C1", "#6199BE", "#639ABC", "#689CB9", "#6C9EB6", "#6F9FB4", "#73A1B1", "#78A3AD", "#7BA5AA", "#81A7A6", 
// "#84A8A4", "#88AAA1", "#8BAC9F", "#8FAD9C", "#93AF99", "#97B196", "#9BB393", "#9FB491", "#A2B68E", "#A8B88A", 
// "#ABBA88", "#AFBC85", "#B2BD82", "#B7BF7F", "#BAC07D", "#BFC379", "#C3C476", "#C7C674", "#CAC871", "#CEC96E", 
// "#D3CB6B", "#D1CB6C", "#D7CD68", "#DBCF65", "#DDCE64", "#DECE64", "#DFCE63", "#E0CD63", "#E1CD62", "#E3CC62", 
// "#E3CC61", "#E5CC61", "#E6CB60", "#E7CB60", "#E8CB5F", "#E9CA5F", "#EACA5F", "#EBCA5E", "#ECC95E", "#EEC95D", 
// "#EFC85D", "#F0C85C", "#F1C85C", "#F2C75B", "#F3C75B", "#F4C75A", "#F5C65A", "#F6C65A", "#F8C559", "#F9C559", 
// "#FAC558", "#FBC458", "#FCC457", "#FDC457", "#FEC356", "#FEC256", "#FDBF57", "#FBBC58", "#FAB959", "#F9B759", 
// "#F8B45A", "#F6B05C", "#F5AD5C", "#F3AA5D", "#F2A85E", "#F0A55F", "#EFA260", "#ED9E61", "#EC9C61", "#EB9962", 
// "#EA9763", "#E79264", "#E69065", "#E58D66", "#E48B66", "#E38867", "#E18568", "#DF8169", "#DE7E6A", "#DC7B6B", 
// "#DD7C6B", "#DB796C", "#D9756D", "#D8736D", "#D7706E", "#D56D6F", "#D46B70", "#D36871", "#D06272", "#CF6173"]); 

または完全版をhttp://codepen.io/Balzzac/pen/EZGwGy?editors=1000

そして、私はどちらの場合も、最初のスライスと100の第50回で奇妙な動作を取得します。私はそれを修正する理由と方法を理解したいですか？掘りのビットの後

Answer 1

、ここで私が見つけたものです。

この問題の主な原因は、pie(data)を呼び出しても、角度が小さい順にデータが返されないことです。これは、あなたの棒グラフを最も小さい順に並べることを望む場合には問題ではありませんが、あなたの場合、これは問題を引き起こしています。

コンソールでd3.layout.pie()(data)を呼び出すときには、自分自身のためにこれを見ることができます - 値はほとんどソート、しかし、いくつかの例外を除いてです。

var pie = d3.layout.pie().sort(null); 

を使用している場合はD3 v4.0の（あなたがすべき！）、この溶液を呼び出すことです：あなたの円グラフを設定するとき

D3 v3.0ので

、解決策は.sort(null)を呼び出すことです.sortValue(null)：余談として

var pie = d3.pie().sortValues(null); 

、D3 4.0に変換する関連する変更は、次のとおり

<script src="https://d3js.org/d3.v4.min.js"></script> 

.... 

var color = d3.scaleLinear().domain([1,length]) 
    .interpolate(d3.interpolateHcl) 
    .range([d3.rgb("#5C97C1"), d3.rgb('#FFC357')]); 

var arc = d3.arc() 
    .outerRadius(radius) 
    .innerRadius(0); 

var pie = d3.pie().sortValues(null); 

.... 

ブラウザの違いに関連して、私はdifferent sort implementations between browsersに関連している疑いがありますが、これは100％ではありません。