数值尺度-将数据准确映射为图形
数值尺度-线性尺度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- 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- 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.