d3.js学习7

数值尺度-将数据准确映射为图形

数值尺度-线性尺度d3.scale.linear()

---

 

<div id="linear" class="clear">
</div>

<script>
	var data=[];
	for(var i=1;i<11;i++){
		data.push(i);
	}//生成一个从1到10的数组
	var linear=d3.scale.linear()
	.domain([1,10])//定义域
	.range([1,20]);//值域

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")
	.text(function(d){
		return d3.round(scale(d),2);//保留小数点后2位
	});
}
render(data,linear,"#linear");
</script>    

<style type="text/css">
        .cell {
		min-width: 40px;
		min-height: 20px;
		margin: 5px;
		float: left;
		text-align: center;
		border: #969696 solid thin;
		padding: 5px;
}
	.clear {
		 clear: both;
}
</style>    

数值尺度-幂尺度d3.scale.pow(n)

---

 

var pow=d3.scale.pow().exponent(2);

输出数组1-10的2次方

 

使用rangeRound([m,n])来限定值域，并取整。

对数尺度

---

 

var log=d3.scale.log();

Constructs a new log scale with the default domain [1,10], the default range [0,1], and the base 10.

根据官网，默认底数为10.

时间尺度d3.time.scale()

---

 

var startDate=new Date(2014,0,1);//2014n年1月1日
var endDate=new Date(2014,11,31);//2014年12月31日
var time=d3.time.scale()
	.domain([startDate,endDate])
	.rangeRound([0,1200]);//将一年定位1200个像素，平均每月100个
var data=[];
//生成数组data，包含1月到12月
for(var i=0;i<12;i++){
	var date=new Date(startDate.getTime());
	date.setMonth(startDate.getMonth()+i);
	data.push(date);
}

function render(data,scale,component){
	var selector=d3.select(component).selectAll("div.fixed-cell").data(data);
	//enter
	selector.enter()
	.append("div").classed("fixed-cell",true);
	//exit
	selector.exit().remove();
	//update
	selector.style("margin-left",function(d){
		return scale(d)+"px";//返回距离，一字排开
	})
	.html(function (d){
		var format=d3.time.format("%x");//详情可见d3.time.format(%n)函数
		return format(d)+"<br>"+scale(d)+"px";
	});
}
render(data,time,"#linear");

css

.fixed-cell {
	min-width: 40px;
	min-height: 20px;
	margin: 5px;
	position: fixed;
	text-align: center;
	border: #969696 solid thin;
	 padding: 5px;
}

d3.html(url[, callback]) request an HTML document fragment.