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，將截斷，效果：