饼图在旋转颜色时避免相同的相邻颜色

Question

旋转说5种颜色，ABCDE
4片：ABCD
5片：ABCDE
7片：ABCDEAB
6片：ABCDEA
哒哒！两个A相邻。

如何避免这种情况？
我可以切换到 6片：ABCDEB或其他什么，颜色顺序无关紧要 但怎么办呢？

Answer 1

您可以使用类似的方法为切片着色。

color = d3.scale.ordinal()
               .domain([0,1,2,3])
               .range(["red", "green", "blue", "pink"]);;
color(0);//red
color(1);//green
color(2);//blue    
color(3);//pink
color(4);//red
color(5);//green
...so on //so the slice index can decide the color, using the scale.

修改

制作这样的函数以确保没有相邻的颜色相同。

此处sliceNumber是饼图中切片的索引。 这里maxSlices是饼图中的最大切片

function getMyColor(sliceNumber,maxSlices){
   if ((sliceNumber == maxSlices) && (color(sliceNumber) == color(maxSlices))){
       return color(sliceNumber + 1)
   } else {
       return color(sliceNumber)
   }
}

Answer 2

有很多方法可以做到这一点。最简单的方法之一是具有多个颜色集（具有不同数量的颜色）......并且根据数据项（饼图中的扇区）的数量，更改颜色集。这是一个快速示例...更改要测试的数据长度。

DEMO

var colorSet1 = ["#98abc5", "#8a89a6", "#7b6888", "#6b486b"];
var colorSet2 = ["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"];

var colorSet = data.length%2 == 0 ? colorSet1 : colorSet2;

以上代码来自D3示例：https://bl.ocks.org/mbostock/3887235