D3.js库-6-比例尺的使用
比例尺在D3中是一个非常实用的工具,可以这样理解比例尺:$\color{red}{一种一一映射}$的关系,从domain
映射到range
。因为在建立比例尺的过程中会经常使用到两个函数:domain()和range()。本文中介绍两种常用的比例尺
-
线性比例尺
scaleLinear
-
序数比例尺
scaleOrdinal
线性比例尺scaleLinear
在线性比例尺中,domain
和range
都是连续变化的。关系类似于线性函数
代码解释:
1 | var scaleLinear = d3.scaleLinear() |
表示将数据从[0.9,5]映射到了[0,300]之间,定义的变量scaleLinear好比是一个函数,能够直接传入参数进行计算
注意在D3中如何进行换行操作
序数比例尺scaleOrdinal()
domain
和range
都是离散化的,可以说都是数组的形式,不是连续的
同样的,在定义了比例尺之后,可以当做函数来使用,传入参数
1 | <script> |
比例尺作图
利用线性比例尺来做柱状图
1 | <body> |
利用比例尺加上刻度线来作图
1 | <body> |