Круговая диаграмма избежать такой же соседний цвет при вращении цвета

Question

Для вращения сказать, 5 цветов, АВСОЕ
4 ломтика: ABCD
5 ломтиков: ABCDE
7 ломтиков: ABCDEAB
6 ломтиков: ABCDEA
DaDa! Два 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. 

EDIT

сделать функцию, как это гарантировать, что никакие соседние цвета не совпадают.

Здесь sliceNumber - это индекс среза в круговой диаграмме. Здесь maxSlices является максимальной долькой в ​​круговой диаграмме

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