日期：2020-10-09
作者：18届WRZ
标签：数据可视化
一.比例尺简介
简单理解，比例尺是可以把输入数据的值域映射为输出范围的一个函数。
比例尺的输入值域：可能的输入值的范围
比例尺的输出范围：输出值可能的范围，一般用像素作为单位
二.创建比例尺
var scale = d3.scale.linear() //新版写法为d3.scaleLinear()
.domain([100, 500]) //输入值域
.range([10, 350]); //输出范围
scale(100); //返回10
scale(500); //返回350
三.动态创建比例尺
1.获取数据中的最小值与最大值
这里会使用到两个函数：d3.min()以及d3.max()。（以d3.min()为例，d3.max()用法与之相同）
- 一维数据的最小值
var dataset=[1,2,3,4,5];
d3.min(dataset);
min()会简单地循环数组中的每个值，找出其中最小的值
- 二维数据的最小值
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];
d3.min(dataset,function(d){
return d[0];
});
此时需要传入第二个参数即存取器函数，告诉函数需要获取的是第几维度的数据的最小值
2.设置动态缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>比例尺缩放</title>
<script type="text/javascript" src="../d3/d3.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
var w=400;
var h=150;
var xPadding=40;
var yPadding=20;
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];
var svg=d3.select("body").append("svg").attr("width",w).attr("height",h);
var xScale=d3.scaleLinear()
.domain([0,d3.max(dataset,function(d){
return d[0];
})])
.range([xPadding,w-xPadding]); //x轴比例尺
var yScale=d3.scaleLinear()
.domain([0,d3.max(dataset,function(d){
return d[1];
})])
.range([h-yPadding,yPadding]); //y轴比例尺
var rScale=d3.scaleLinear()
.domain([0,d3.max(dataset,function(d){
return d[1];
})])
.range([2,5]);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function(d) {
return rScale(d[1]);
}); //越在上方的点的面积越大，根据面积来计算半径
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d[0]+","+d[1];
})
.attr("x",function(d){
return xScale(d[0]);
})
.attr("y",function(d){
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
</script>
</body>
</html>
效果如下所示
