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)时，您可以自己看到这一点 - 值几乎排序，但有一些例外情况。

在D3 v3.0中，解决方案是在设置饼图时调用.sort(null)：

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

如果您使用的是D3 v4.0（您应该使用它！），解决方法是拨打.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％肯定。