d3.js学习8

颜色尺度d3.scale.category()

 

---

d3.scale.category10() construct an ordinal scale with ten categorical colors.

d3.scale.category20() construct an ordinal scale with twenty categorical colors.

d3.scale.category20b() construct an ordinal scale with twenty categorical colors.

d3.scale.category20c() construct an ordinal scale with twenty categorical colors.

var data=[];
for(var i=0;i<20;i++){
	data.push(i);//生成0-19的数组
}
function render(data,scale,component){
	var selector=d3.select(component).selectAll("div.cell").data(data);
        //enter
	selector.enter().append("div").classed("cell",true);
	//exit
	selector.exit().remove();
	//update
	selector.style("display","inline-block")
		.style("background-color",function(d){
		return scale(d).indexOf("#")>=0?scale(d):"white";//三元表达式返回背景颜色 #.....不然设置背景色为white
	})
	.text(function(d){
		return scale(d);//背景色输出为文字
	})
}

render(data,d3.scale.category20(),"#category");
使得0-19 20个数字与20个颜色一一对应
    

若是生成数组为20个数字，使用category10，将生成两遍同一内容；若是生成10个数字，使用category20，将截断，效果：