饼图在旋转颜色时避免相同的相邻颜色
Pie chart avoiding same adjacent color when rotating colors
要旋转 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"]);;
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)
}
}
有多种方法可以做到这一点。最简单的方法之一是拥有多个颜色集(具有不同数量的颜色)......并根据数据项的数量(饼图中的扇区)更改颜色集。这是一个简单的示例...更改要测试的数据的长度。
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
要旋转 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"]);;
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)
}
}
有多种方法可以做到这一点。最简单的方法之一是拥有多个颜色集(具有不同数量的颜色)......并根据数据项的数量(饼图中的扇区)更改颜色集。这是一个简单的示例...更改要测试的数据的长度。
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