比例尺
将某一区域的值映射到另一区域，其大小关系不变。
这被称之为比例尺
比例尺分为两种：
- 线性比例尺
- 序数比例尺
（我的D3版本是v4的，这里v3在更新到v4之后，方法变动了很多，d3官方将方法进行了规范，本文中的比例尺就被规范了，v3，v4版本在比例尺方法上使用就不一样）
线性比例尺
var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
var dataset_2 = [ 2500, 2100, 1700, 1300, 900 ];
var dataset = [20,85,10,15,39,46];
var min = d3.min(dataset);
var max = d3.max(dataset);
//新库中不使用d3.scale.linear()了，
//而是用 d3.scaleLinear()来代替。
//把所有的d3.scale.linear()换成d3.scaleLinear()就可以出结果了。
var linear = d3.scaleLinear()
.domain([min, max])
.range([0, 300]);
linear(0.9); //return 0
linear(2.3); //return 175
linear(3.3); //return 300
这里能看到，0.9被映射成了0，3.3 被映射成了300
序数比例尺
var index = [0, 1, 2, 3, 4];
var word = ["A", "B", "C", "D", "E"];
//新库中不使用d3.scale.ordinal()了，
//而是用 d3.scaleOrdinal()来代替。
//把所有的d3.scale.ordinal()换成d3.scaleOrdinal()就可以出结果了。
var ordinal = d3.scaleOrdinal().domain(index).range(word);
ordinal(0);
ordinal(2);
ordinal(4);
序数比例尺是将元素以下标的方式进行映射
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>The Sixth</title>
</head>
<script src="../../../JS/d3.min.js"></script>
<body>
<!-- 给柱形图添加比例尺 -->
<script>
var dataset = [20,85,10,15,39,46];
var linear = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, 250]);
var width = 300;
var height = 300;
var svg = d3.select("body")//选择页面中的body元素
.append("svg")//添加一个svg元素
.attr("width",width)//设定宽度
.attr("height",height);//设定高度
var rectHeight = 25; //每个矩形所占的像素高度(包括空白)
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",20)
.attr("y",function(d,i){
return i * rectHeight;
}).attr("width",function(d){
return linear(d); //在这里用比例尺
}).attr("height",rectHeight-2)
.attr("fill","steelblue");
</script>
</body>
</html>
此时的图表就有些样子了，下一篇加上坐标轴一张简单的图表就完成了
