1.为什么要使用比例尺
将某一区域映射到另外一个区域,其大小关系不变
2.有哪些比例尺
D3中的比例尺,很像数学中的函数
给定一个x(定义域)。 也就确定了一个y(值域)。
D3中称为domain和range。
我们在使用时,需要给定domain和range的范围,便得到了一个映射关系
线性比利尺
将一个连续的区间,映射到另外一个区间
假设有如下数组
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
要求:将最小的映射为0,最大的映射为300
var min=d3.min(dataset);
var max=d3.max(dataset);
var linear=d3.scale.linear()
.domain([min,max])
.range([0,300])
console.log(linear(0.9)) //0
console.log(linear(3.3)) //300
d3.scale.linear() 的返回值,是可以当做函数来使用的。因此,才有这样的用法:linear(0.9)。
- 序数比例尺
有时候domain和range不是连续的
例如:
var index=[0,1,2,3,4];
var color=["red","blue","green","yellow","black"]
我们希望0对应的就是red,1对应的就是blue,依次类推
这时候就需要用到序数比例尺
var ordinal=d3.scale.ordinal()
.domain(index)
.range(color);
ordinal(0) //red
ordinal(4) //black
3.给柱形图添加比例尺
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<p>Apple</p>
<p>pear</p>
<p>banana</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var height = "300";
var width = "300";
var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
//定义比例尺
var linear =d3.scale.linear()
.domain([0,d3.max(dataset)]) //这里一定注意范围是个数组
.range([0,300]); //这里一定注意范围是个数组
var rectHeight=25;
var svg=d3.select("body").append("svg")
.attr("height",height)
.attr("width",width)
svg.selectAll("rect") //这里注意千万不要少了`All`
.data(dataset)
.enter()
.append("rect")
.attr("x",20)
.attr("y",function(d,i){
return i * rectHeight;
})
.attr("height",rectHeight-2)
.attr("width",function(d){
return linear(d); //就是再这里使用到了比例尺
})
</script>
</body>
</html>