d3入门篇（三）：比例尺坐标轴

悠悠 2022-03-02 10:46 302阅读 0赞

这篇文章继续介绍d3的基础知识

## 比例尺 ##

在绘制柱状图时，我们往往会定义很大的画布，然而我们要可视化的数据确很小，这时会出现很多留白
    的情况。为了根据显示刻度灵活变化宽高，而不是定死，特别是数据差异性很大的时候，我们希望图表
    显示范围都在画布里面，这时就会引入**比例尺**的概念来进行缩放（scale）。
    
    我们在数学里有函数的概念y=f(x),定义域为x（输入）的取值范围，值域为y（输出）的取值范围。输
    入x,根据函数规则会输出一个y。
    
    d3中的比例尺与数学中的函数类似，首先我们需要指定函数类别，即比例尺的类别，如scaleLinear，
    scalePow, scaleQuantise, scaleOrdinal, scaleSqrt, scaleLog, scaleSequential等等。
    然后我们需要给定函数的定义域domain([])，最后需要给定函数的值域range([])。根据这些规则，
    d3会为我们返回一个比例尺**函数**。

**示例**

var linearScale=d3.scaleLinear()
    .domain([0,d3.max(dataset,function (d) {
        return d;
    })])
    .range([0,height]);
    //这里linearScale为一个函数，我们可直接执行linearScale(d)

**完整示例**

import * as d3 from "d3";
    var width=300;//svg画布宽
    var height=200;//svg画布高
    var rectWidth=30;//每个矩形的默认宽度
    var dataset=[45,70,12,79,4,127,33,90];
    //定义画布
    var svg=d3.select("body")
    .append("svg")
    .attr("width",width)
    .attr("height",height)
    .style("background-color","yellow");
    //定义比例尺
    var linearScale=d3.scaleLinear()
    .domain([0,d3.max(dataset,function (d) {
        return d;
    })])
    .range([0,height]);
    //绑定数据集 绘制柱形图
    svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("width",rectWidth-2)
    .attr("height",function (d,i) {
         return linearScale(d)
    })
    .attr("x",function (d,i) {
          return rectWidth*i
    })
    .attr("y",200)
    .attr("transform",function (d,i) {
        return `translate(0,${linearScale(-d)})`
    })
    .attr("fill","blue")

**结果**  
![clipboard.png][]  
结果显示，数据集被比例尺进行缩放（scale）可视化出来。 d3还提供很多数据处理的方法，max min extent sum median mean shuffle等等。

## 坐标轴 ##

要定义坐标轴，主要两个步骤：
    （1）定义坐标轴的比例尺；
    （2）定义坐标轴朝向，刻度；

**示例**

import * as d3 from "d3";
    
    var width = 300;//svg画布宽
    var height = 200;//svg画布高
    var dataset = [45, 70, 12, 79, 4, 127, 33, 150];
    var testDataset = [4.5, 7.0, 1.2, 7.9, 0.4, 12.7, 3.3, 9.0];
    var rectWidth = 30;//每个矩形的默认宽度
    //定义画布
    var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("background-color", "yellow");
    //定义矩形比例尺
    var linearScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function (d) {
        return d;
    })])
    .range([0, 200]);
    
    var g = svg.append("g")
    .attr("transform", "translate(40,0)");
    
    g.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("width", rectWidth - 2)
    .attr("height", function (d, i) {
        return linearScale(d)
    })
    .attr("x", function (d, i) {
        return rectWidth * i
    })
    .attr("y", 200)
    .attr("transform", function (d, i) {
        return `translate(0,${linearScale(-d)})`
    })
    .attr("fill", "blue");
    //定义坐标轴比例尺
    var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function (d) {
        return d;
    })])
    .range([200,0]);
    //定义坐标轴
    var yAxis = d3.axisLeft(yScale)
    .ticks(5);
    //调用坐标轴
    g.append("g")
    .attr("transform", `translate(0,0)`)
    .call(yAxis);

**结果**

![clipboard.png][clipboard.png 1]  
**补充知识点**

1.“g”标签
    g标签是svg的常用标签，相当于一个容器标签，把相关元素进行组合。通过g标签组合在一起的元素，可以
    通过g标签设置属性等，进行坐标变换等操作，如attr("transform","translate()"),进行元素平移；
    2.定义坐标轴
        var yAxis = d3.axisLeft(yScale)
        .ticks(5);
    首先需要设置坐标轴的朝向，这里是向左，将坐标轴的比例尺作为参数传入axisLeft中；
    通过ticks设置刻度的数目（不过好像并没有什么用处）
    3.call（）
        g.append("g")
        .attr("transform", `translate(0,0)`)
        .call(yAxis);
    yAxis是我们定义的一个坐标轴，其实它本身也是一个函数，将新建的分组<g>传给yAxis()函数，用以绘制，
    所以这句代码等价于yAixs (g.append("g") ) ;

[clipboard.png]: /images/20220302/67943b86118e4d38adab14fbb9201632.png
[clipboard.png 1]: /images/20220302/076742d2ea4d4697a448d54f87317611.png