餅圖旋轉顏色

Question

要旋轉說5種顏色時避免相同的相鄰的彩色，ABCDE
4片：ABCD
5片：ABCDE
7片：ABCDEAB
6片：ABCDEA
達達！兩個A是相鄰的。

如何避免這種情況？
我很好切換到
6片：ABCDEB或者什麼，顏色順序無所謂
但是怎麼做到的？

Answer 1

可以有很多方法的最大切片。最簡單的方法之一是擁有多個顏色集（具有不同數量的顏色）......並根據數據項的數量（餅圖中的扇區）更改顏色集。這裏是一個簡單的例子...改變要測試的數據的長度。

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

Answer 2

你可以使用這樣的東西來爲你的切片着色。

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