d3.js自定义颜色怪异行为-渐变问题

debugcn 发表于 Dev

玛莉亚

我对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

在这两种情况下，我在第一个片段和第50个片段中都得到了奇怪的行为。我想了解为什么以及如何解决它？

安德鲁·盖伊

经过一番挖掘，这就是我所发现的。

问题主要与以下事实有关：对的调用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);

....

关于浏览器之间的差异，我怀疑它与浏览器之间的不同排序实现有关，但是对此并不是100％肯定的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。