摘要：比如输入是，输出是，输入是，输出是，那么这其中的映射关系就是你所定义的比例尺。映射关系输入与输出输出输出输出当输入不是中的数据集时输出输出输入不相关的数据依然可以输出值。
D3中有个重要的概念就是比例尺。比例尺就是把一组输入域映射到输出域的函数。映射就是两个数据集之间元素相互对应的关系。比如输入是1，输出是100，输入是5，输出是10000，那么这其中的映射关系就是你所定义的比例尺。
D3中有各种比例尺函数，有连续性的，有非连续性的，本文对于常用比例尺进行一一介绍。
1. d3.scaleLinear() 线性比例尺使用d3.scaleLinear()创造一个线性比例尺，而domain()是输入域，range()是输出域，相当于将domain中的数据集映射到range的数据集中。
let scale = d3.scaleLinear().domain([1,5]).range([0,100])
映射关系：
接下来，我们来研究这个比例尺的输入和输出。
scale(1) // 输出:0 scale(4) // 输出:75 scale(5) // 输出:100
刚才的输入都是使用了domain区域里的数据，那么使用区域外的数据会得出什么结果呢？
scale(-1) // 输出:-50 scale(10) // 输出:225
所以这只是定义了一个映射规则，映射的输入值并不局限于domain()中的输入域。
2. d3.scaleBand() 序数比例尺d3.scaleBand()并不是一个连续性的比例尺，domain()中使用一个数组，不过range()需要是一个连续域。
let scale = d3.scaleBand().domain([1,2,3,4]).range([0,100])
映射关系：
看一下输入与输出：
scale(1) // 输出:0 scale(2) // 输出:25 scale(4) // 输出:75
当输入不是domain()中的数据集时：
scale(0) // 输出:undefined scale(10) // 输出:undefined
由此可见，d3.scaleBand()只针对domain()中的数据集映射相应的值。
3. d3.scaleOrdinal() 序数比例尺d3.scaleOrdinal()的输入域和输出域都使用离散的数据。
let scale = d3.scaleOrdinal().domain(["jack", "rose", "john"]).range([10, 20, 30])
映射关系：
输入与输出：
scale("jack") // 输出:10
scale("rose") // 输出:20
scale("john") // 输出:30
当输入不是domain()中的数据集时：
scale("tom") // 输出:10
scale("trump") // 输出:20
输入不相关的数据依然可以输出值。所以在使用时，要注意输入数据的正确性。
我们从上面的映射关系中可以看出，domain()和range()的数据是一一对应的，如果两边的值不一样呢？下面两张图说明这个问题：
domain()的值按照顺序循环依次对应range()的值。
4. d3.scaleQuantize() 量化比例尺d3.scaleQuantize()也属于连续性比例尺。定义域是连续的，而输出域是离散的。
let scale = d3.scaleQuantize().domain([0, 10]).range(["small", "medium", "long"])
映射关系：
输入与输出：
scale(1) // 输出:small scale(5.5) // 输出:medium scale(8) // 输出:long
而对于domain()域外的情况：
scale(-10) // 输出：small scale(10) // 输出：long
大概就是对于domain()域的两侧的延展。
5. d3.scaleTime() 时间比例尺d3.scaleTime()类似于d3.scaleLinear()线性比例尺，只不过输入域变成了一个时间轴。
let scale = d3.scaleTime()
.domain([new Date(2017, 0, 1, 0), new Date(2017, 0, 1, 2)])
.range([0,100])
输入与输出：
scale(new Date(2017, 0, 1, 0)) // 输出:0 scale(new Date(2017, 0, 1, 1)) // 输出:50
时间比例尺较多用在根据时间顺序变化的数据上。另外有一个d3.scaleUtc()是依据世界标准时间(UTC)来计算的。
6. 颜色比例尺D3提供了一些颜色比例尺，10就是10种颜色，20就是20种：
d3.schemeCategory10 d3.schemeCategory20 d3.schemeCategory20b d3.schemeCategory20c // 定义一个序数颜色比例尺 let color = d3.scaleOrdinal(d3.schemeCategory10)7. 其他比例尺
另外有一些函数比例尺的功能，从名称上就可见一斑。
d3.scaleIdentity() // 恒等比例尺 d3.scaleSqrt() // 乘方比例尺 d3.scalePow() // 类似scaleSqrt的乘方比例尺 d3.scaleLog() // 对数比例尺 d3.scaleQuantile() // 分位数比例尺8. invert()与invertExtent()方法
上述的各种使用比例尺的例子都相当于一个正序的过程，从domain的数据集映射到range数据集中，那么有没有逆序的过程呢？D3中提供了invert()以及invertExtent()方法可以实现这个过程。
let scale = d3.scaleLinear().domain([1,5]).range([0,100])
scale.invert(50) // 输出:3
let scale2 = d3.scaleQuantize().domain([0,10]).range(["small", "big"])
scale2.invertExtent("small") // 输出:[0,5]
不过，值得注意的是，这两种方法只针对连续性比例尺有效，即domain()域为连续性数据集的比例尺。那么非连续性的比例尺就没有invert()方法了吗？
收尾到此，对于D3V4版本中的常见比例尺的映射关系都进行了介绍，而各个比例尺还提供了许多其他功能，比如在绘制坐标轴中用到的ticks()，tickFormat()等功能，具体API可以参见此处。关于第8点最后提出的问题，请听下回分解。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85230.html
摘要：设置为，则所有超出值域范围的值，都会被收缩到值域之内。指数比例尺相对线性比例尺多出一个用于指定指数。这段代码中相当于定义一个线性比例尺。使用量子比例尺后定义域将被分成这段，分别对应值域的个值。 线性比例尺 线性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 创建一个定量的线性比例尺. linear.domain([numbers]) - ...
摘要：设置为，则所有超出值域范围的值，都会被收缩到值域之内。指数比例尺相对线性比例尺多出一个用于指定指数。这段代码中相当于定义一个线性比例尺。使用量子比例尺后定义域将被分成这段，分别对应值域的个值。 线性比例尺 线性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 创建一个定量的线性比例尺. linear.domain([numbers]) - ...
摘要：该事件不会区分字母的大小写，例如和被视为一致。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。而有元素与数据对应的部分称为。 1.安装
摘要：为了根据显示刻度灵活变化宽高，而不是定死，特别是数据差异性很大的时候，我们希望图表显示范围都在画布里面，这时就会引入比例尺的概念来进行缩放。根据这些规则，会为我们返回一个比例尺函数。 这篇文章继续介绍d3的基础知识 比例尺 在绘制柱状图时，我们往往会定义很大的画布，然而我们要可视化的数据确很小，这时会出现很多留白 的情况。为了根据显示刻度灵活变化宽高，而不是定死，特别是数据差异性很大的...
摘要：之前只是各个部分的，现在将各部分整合起来，发现还是学到了不少东西主要是加深了对比例尺的理解代码样式及数据样式接着是数据及柱状图宽高等留白用创建比例尺实践之后对比例尺与坐标轴的理解加深了一点轴使用线性比例尺，注意输入域轴使用比例尺用于柱形 d3js.org v5.9.2 之前只是各个部分的demo，现在将各部分整合起来，发现还是学到了不少东西 主要是加深了对scale（比例尺）的理解...
阅读 1494·2021-09-26 09:55
阅读 3179·2021-09-22 15:31
阅读 5136·2021-09-22 15:12
阅读 2041·2021-09-22 10:02
阅读 4381·2021-09-04 16:40
阅读 827·2019-08-30 15:55
阅读 2818·2019-08-30 12:56
阅读 1665·2019-08-30 12:44
