Date: 2020-10-09
Author: 18th WRZ
Tags: Data Visualization
1. Introduction to Scale
Simply understand, the scale is a function that can map the value range of the input data to the output range.
The input value range of the
scale : the range of possible input values The output range of the scale: the possible range of output values, generally using pixels as the unit
2. Create a scale
var scale = d3.scale.linear() //新版写法为d3.scaleLinear()
.domain([100, 500]) //输入值域
.range([10, 350]); //输出范围
scale(100); //返回10
scale(500); //返回350
3. Dynamically create a scale
1. Get the minimum and maximum values in the data
Two functions will be used here: d3.min() and d3.max(). (Take d3.min() as an example, the usage of d3.max() is the same)
- The minimum value of one-dimensional data
var dataset=[1,2,3,4,5];
d3.min(dataset);
min() will simply loop through each value in the array to find the smallest value
- Minimum value of two-dimensional data
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];
});
At this time, you need to pass in the second parameter, the accessor function, to tell the function to get the minimum value of the data of which dimension
2. Set dynamic zoom
<!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>
The effect is as follows
