本文共 3308 字，大约阅读时间需要 11 分钟。
D3.js 是一个强大的数据可视化库，能够帮助开发者轻松创建交互式的数据图表。其中，比例尺和坐标轴是数据可视化中至关重要的组成部分。本文将详细介绍 D3 的比例尺类型及其应用示例，并提供坐标轴的使用方法。
比例尺根据定义域和值域的处理方式可以分为以下几种类型：
连续比例尺将一个连续的定义域映射到另一个连续的值域。常见类型包括线性比例尺、指数比例尺、对数比例尺、恒等比例尺和时间比例尺。
线性比例尺 (Linear Scale)
通过d3.scaleLinear() 创建。默认定义域为 [0, 1]，值域为 [0, 1]。输出值可以表示为 y = mx + b，其中 x 为定义域值。指数比例尺 (Power Scale)
通过d3.scalePow() 创建。默认指数为 1，与线性比例尺效果相同。可以通过 pow.exponent() 方法设置指数。对数比例尺 (Log Scale)
通过d3.scaleLog() 创建。默认基数为 10。输出值可以表示为 y = m log(x) + b。恒等比例尺 (Identity Scale)
通过d3.scaleIdentity() 创建。定义域和值域完全相同。时间比例尺 (Time Scale)
通过d3.scaleTime() 创建。输入值会被强制转为日期类型，适用于时间序列数据。序列比例尺将连续的定义域映射到连续的值域，但其插值器和值域不可配置。使用 d3.scaleSequential(interpolate) 创建，适用于周期性颜色或渐变色彩的映射。
发散比例尺类似于序列比例尺，但输出值根据插值器计算，可用于发散色彩映射。通过 d3.scaleDiverging(interpolate) 创建。
量化比例尺将连续的定义域划分为离散的区间，适用于离散的值域映射。通过 d3.scaleQuantize() 创建，常用于颜色映射或分类。
分位比例尺将离散的定义域映射到离散的值域，通常用于统计数据的分位数分析。
阈值比例尺根据定义域的值选择特定的值域值，常用于分类数据。
序数比例尺将离散的定义域映射到离散的值域，适用于类别数据的标注或编号。
分段比例尺将连续的定义域划分为均匀的区间，常用于条形图或类别数据的展示。通过 d3.scaleBand() 创建。
坐标轴是数据可视化中重要的组成部分，用于辅助读者理解数据的分布和关系。以下是创建坐标轴的步骤示例。
以下是创建柱状图的坐标轴的示例：
import * as d3 from "d3";// 数据集const dataset = [20, 43, 120, 87, 99, 167, 142];// SVG 设置const width = 600, height = 600;const svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height) .style("background-color", "#e5e5e5");// 坐标轴比例尺const xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .rangeRound([0, width - padding.left - padding.right]);const yScale = d3.scaleLinear() .domain([0, d3.max(dataset)]) .range([height - padding.top - padding.bottom, 0]) .nice();// 创建坐标轴const xAxis = d3.axisBottom(xScale);const yAxis = d3.axisLeft(yScale);// 在 SVG 中添加坐标轴svg.append("g") .attr("transform", `translate(${padding.left},${height - padding.bottom})`) .call(xAxis);svg.append("g") .attr("transform", `translate(${padding.left},${padding.top})`) .call(yAxis); 以下是创建散点图的坐标轴的示例：
import * as d3 from "d3";// 数据集const center = [ [0.5, 0.5], [0.7, 0.8], [0.4, 0.9], [0.11, 0.32], [0.88, 0.25], [0.75, 0.12], [0.5, 0.1], [0.2, 0.3], [0.4, 0.1], [0.6, 0.7]];// SVG 设置const width = 700, height = 600;const padding = { top: 50, right: 50, bottom: 50, left: 50 };// 创建比例尺const xScale = d3.scaleLinear() .domain([0, 1.2 * d3.max(center, d => d[0])]) .range([0, width - padding.left - padding.right]) .nice();const yScale = d3.scaleLinear() .domain([0, 1.2 * d3.max(center, d => d[1])]) .range([height - padding.top - padding.bottom, 0]) .nice();// 创建坐标轴const xAxis = d3.axisBottom(xScale);const yAxis = d3.axisLeft(yScale);// 在 SVG 中添加坐标轴const gs = d3.select("body") .append("svg") .attr("width", width) .attr("height", height) .style("background-color", "#e5e5e5") .append("g");// 添加坐标轴gs.append("g") .attr("transform", `translate(${padding.left},${height - padding.bottom})`) .call(xAxis);gs.append("g") .attr("transform", `translate(${padding.left},${padding.top})`) .call(yAxis); 比例尺和坐标轴是数据可视化中核心的工具。通过选择合适的比例尺类型，可以实现数据的精确展示。无论是连续比例尺、序列比例尺，还是分段比例尺，每种类型都有其独特的应用场景。在实际开发中，需要根据数据的性质选择最合适的比例尺，并结合坐标轴进行精确的调节，以确保最终的数据图表既美观又具有可读性。
转载地址：http://legx.baihongyu.com/