要旋转说5种颜色时避免相同的相邻的彩色,ABCDE
4片:ABCD
5片:ABCDE
7片:ABCDEAB
6片:ABCDEA
达达!两个A是相邻的。饼图旋转颜色
如何避免这种情况?
我很好切换到
6片:ABCDEB或者什么,颜色顺序无所谓
但是怎么做到的?
要旋转说5种颜色时避免相同的相邻的彩色,ABCDE
4片:ABCD
5片:ABCDE
7片:ABCDEAB
6片:ABCDEA
达达!两个A是相邻的。饼图旋转颜色
如何避免这种情况?
我很好切换到
6片:ABCDEB或者什么,颜色顺序无所谓
但是怎么做到的?
可以有很多方法的最大切片。最简单的方法之一是拥有多个颜色集(具有不同数量的颜色)......并根据数据项的数量(饼图中的扇区)更改颜色集。这里是一个简单的例子...改变要测试的数据的长度。
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
你可以使用这样的东西来为你的切片着色。
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)
}
}
是不是仅用于旋转的颜色,而不是为了避免相邻的相同颜色的溶液?我正在使用它来旋转颜色。 –
是的!你对旋转的颜色是正确的。 2个相邻颜色相同的唯一可能性是当n个切片的颜色(0)和颜色(n-1)相同时。 为什么不从一个返回颜色的函数做一个if检查。如果颜色(0)和颜色(n-1)相同,则返回颜色(n-2)。检查我的答案的编辑块。 – Cyril