本文深入解析D3.js中常用的比例尺类型，包括线性、序数、时间、阈值及量化比例尺。通过具体代码示例，展示如何配置域与范围，实现数据到视觉元素的精确映射，并介绍逆序转换方法，帮助开发者构建灵活的可视化图表。
中国地域辽阔，若要在有限的地图空间内完整呈现，必须依据特定比例进行缩放。D3.js在进行可视化绘图时同样遵循这一逻辑：假设柱状图的数据最大值为10000，而画布的最大高度仅为400像素，此时最大值需映射为400。那么，数值8000、5000等中间值又该如何对应到具体的像素高度呢？
比例尺概述
D3.js内置了超过20种比例尺（包括d3.scaleLinear、d3.scalePow、d3.scaleTime、d3.scaleBand等），根据输入与输出的数据类型，主要可划分为三大类：
- 连续输入与连续输出
- 连续输入与离散输出
- 离散输入与离散输出
常用比例尺解析
scaleLinear 线性比例尺
const scale = d3.scaleLinear() // 连续输入和连续输出
.domain([0, 500]) // 输入域 0 ~ 500
.range([0, 300]); // 输出域 0 ~ 300
console.log(scale(100)) // 60
console.log(scale(300)) // 180
console.log(scale(500)) // 300
scaleBand 有序序数比例尺
scaleBand：该比例尺常用于构建条形图，能够自动处理条形间的间距。用户需指定域（即每个条形对应的值集合）以及范围（条形的最小与最大边界，例如条形图的总宽度）。
实际上，scaleBand会将范围划分为n个波段（n为域数组中值的数量），并在指定间距下计算每个条形的位置与宽度。
const scale = d3.scaleBand()
.domain([1,2,3,4])
.range([0,100])
console.log(scale(1)) // 0
console.log(scale(3)) // 50
console.log(scale(4)) // 75
console.log(scale.bandwidth()) // 25 (100 分为4份，每份25(柱状图宽度))
d3.scaleTime() 时间比例尺
d3.scaleTime()的功能类似于d3.scaleLinear()线性比例尺，区别在于其输入域被设定为时间轴，用于处理日期数据。
const scale = d3.scaleTime()
.domain([new Date(2022, 0, 1), new Date(2022, 0, 31)])
.range([0, 30])
console.log(scale3(new Date(2022, 0, 15))) // 14
scaleOrdinal 无序序数比例尺
const scale = d3.scaleOrdinal() // 离散输入和离散输出
.domain(['jack', 'rose', 'john', 'lucy'])
.range([10, 20, 30])
console.log(scale("jack")); // 10
console.log(scale("lucy")); // 10
console.log(scale("rose")); // 20
console.log(scale("john")); // 30
console.log(scale("finget")) // 20 输入域以外的值
const scale = d3.scaleOrdinal()
.domain(['jack', 'rose', 'john', 'lucy'])
.range([10, 20, 30])
.unknown(23) // 指定未知输入域的输出值
console.log(scale("finget")) // 23
当输入域的值数量大于输出域时，domain()会按照顺序循环对应range()中的值，实现离散数据的映射。
scalePoint 点比例尺
// 创建从一组离散值映射到指定范围内等距的点
const scale = d3.scalePoint() // 离散输入和离散输出
.domain(['jack', 'rose', 'john'])
.range([0, 100])
console.log(scale4('jack')) // 0
console.log(scale4('rose')) // 50
console.log(scale4('john')) // 100
console.log(scale4.step()) // 访问点之间的距离 50
scaleThreshold 阈值比例尺
// scaleThreshold 将连续数值输入映射到范围定义的离散值
let scaleThreshold = d3.scaleThreshold() // 连续输入和离散输出
.domain([0, 10, 20])
.range(['small', 'medium', 'large', 'xlarge'])
console.log(scaleThreshold(5)) // medium
console.log(scaleThreshold(15)) // large
console.log(scaleThreshold(25)) // xlarge
console.log(scaleThreshold(35)) // xlarge
console.log(scaleThreshold(45)) // xxlarge
若指定了 domain，则比例尺的输入范围将被设定为指定的数组，该数组必须按升序排列，值通常为数值或可排序的其他类型。若输出域的值个数为 N + 1，则输入域中值的个数必须为 N。若输入值少于 N 个，则输出域中多余的值将被忽略；若多于 N 个，则可能返回 undefined 的情况。若未指定 domain，则返回比例尺当前的输入域。
// invertExtent 返回输出域中的值 value 对应的输入范围
console.log(scaleThreshold.invertExtent('small')) // [Infinity, 0]
console.log(scaleThreshold.invertExtent('medium')) // [0, 10]
console.log(scaleThreshold.invertExtent('large')) // [10, 20]
console.log(scaleThreshold.invertExtent('xlarge')) // [20, Infinity]scaleQuantize 量化比例尺
const scale = d3.scaleQuantize() // 连续输入和离散输出
.domain([0, 10])
.range(['red', 'green', 'blue', 'pink'])
console.log(scale(-1)) // red
console.log(scale(2)) // red
console.log(scale(8)) // pink
console.log(scale(20)) // pink
console.log(scale.invertExtent('red')) // [0, 2.5]
console.log(scale.invertExtent('green')) // [2.5, 5]
console.log(scale.invertExtent('blue')) // [5, 7.5]
console.log(scale.invertExtent('pink')) // [7.5, 10]
颜色比例尺
D3提供了一些颜色比例尺：点击查看文档
d3.schemeCategory10
d3.schemeAccent
d3.schemeDark2
d3.schemePaired
d3.schemePastel1
d3.schemePastel2
d3.schemeSet1
d3.schemeSet2
d3.schemeSet3
// 定义一个序数颜色比例尺
let color = d3.scaleOrdinal(d3.schemeCategory10)
console.log(color(1)) // #1f77b4
总结
本章介绍了几种常用的比例尺，D3 还有一些比例尺可以查看官方文档了解：
d3.scaleIdentity() // 恒等比例尺
d3.scaleSqrt() // 乘方比例尺
d3.scalePow() // 类似scaleSqrt的乘方比例尺
d3.scaleLog() // 对数比例尺
d3.scaleQuantile() // 分位数比例尺
上述的各种使用比例尺的例子都相当于一个正序的过程，从domain的数据集映射到range数据集中，那么有没有逆序的过程呢？D3中提供了invert()以及invertExtent()方法可以实现这个过程。
到此这篇关于D3.js入门之比例尺的使用与绘制的文章就介绍到这了,更多相关D3.js比例尺内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！