D3.js 旋转颜色时避免相同相邻颜色的饼图
旋转5种颜色,ABCDED3.js 旋转颜色时避免相同相邻颜色的饼图,d3.js,pie-chart,D3.js,Pie Chart,旋转5种颜色,ABCDE 4片:ABCD 5片:ABCDE 7片:ABCDEAB 6片:ABCDEA 爸爸!两个A是相邻的 如何避免这种情况? 我可以切换到 6片:ABCDEB或其他,颜色顺序无关紧要 但是如何做到这一点呢?你可以用这样的东西给你的切片上色 color = d3.scale.ordinal() .domain([0,1,2,3]) .range(["red", "green", "blue", "pink"]);; co
4片:ABCD
5片:ABCDE
7片:ABCDEAB
6片:ABCDEA
爸爸!两个A是相邻的 如何避免这种情况?
我可以切换到
6片:ABCDEB或其他,颜色顺序无关紧要
但是如何做到这一点呢?你可以用这样的东西给你的切片上色
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
是饼图中切片的索引。
此处maxsicles
是饼图中的最大切片
function getMyColor(sliceNumber,maxSlices){
if ((sliceNumber == maxSlices) && (color(sliceNumber) == color(maxSlices))){
return color(sliceNumber + 1)
} else {
return color(sliceNumber)
}
}
有很多方法可以做到这一点。最简单的方法之一是拥有多个颜色集(具有不同数量的颜色)。。。根据数据项的数量(饼图中的扇区),更改颜色集。下面是一个简单的例子。。。更改要测试的数据长度
以上代码摘自D3示例:这难道不是一种仅用于旋转颜色而不用于避免相邻相同颜色的解决方案吗?我用这个来旋转颜色。是的!你是正确的旋转颜色。只有当n个切片的颜色(0)和颜色(n-1)相同时,两个相邻颜色才会相同。为什么不从返回颜色的函数中执行if检查呢。如果颜色(0)和颜色(n-1)相同,则返回颜色(n-2)。检查我答案的编辑块。
var colorSet1 = ["#98abc5", "#8a89a6", "#7b6888", "#6b486b"];
var colorSet2 = ["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"];
var colorSet = data.length%2 == 0 ? colorSet1 : colorSet2;