scale-reference

# D3.js 比例尺参考 关于所有 d3 比例尺类型的综合指南，包含示例和用例。 ## 连续比例尺 ### 线性比例尺 (Linear scale) 将连续输入域映射到具有线性插值的连续输出范围。 javascript const scale = d3.scaleLinear() .domain([0, 100]) .range([0, 500]); scale(50); // 返回 250 scale(0); // 返回 0 scale(100); // 返回 500 // 反转比例尺 (从输出获取输入) scale.invert(250); // 返回 50 **用例：** - 定量数据最常用的比例尺 - 坐标轴、柱状图长度、位置编码 - 温度、价格、计数、测量值 **方法：** - `.domain([min, max])` - 设置输入域 - `.range([min, max])` - 设置输出范围 - `.invert(value)` - 从范围值获取域值 - `.clamp(true)` - 将输出限制在范围边界内 - `.nice()` - 将域扩展到整齐的数值 ### 幂比例尺 (Power scale) 通过指数变换将连续输入映射到连续输出。 javascript const sqrtScale = d3.scalePow() .exponent(0.5) // 平方根 .domain([0, 100]) .range([0, 500]); const squareScale = d3.scalePow() .exponent(2) // 平方 .domain([0, 100]) .range([0, 500]); // 平方根的简写 const sqrtScale2 = d3.scaleSqrt() .domain([0, 100]) .range([0, 500]); **用例：** - 感知缩放（人类感知是非线性的） - 面积编码（使用平方根将数值映射到圆半径） - 强调小数值或大数值之间的差异 ### 对数比例尺 (Logarithmic scale) 通过对数变换将连续输入映射到连续输出。 javascript const logScale = d3.scaleLog() .domain([1, 1000]) // 必须为正数 .range([0, 500]); logScale(1); // 返回 0 logScale(10); // 返回 ~167 logScale(100); // 返回 ~333 logScale(1000); // 返回 500 **用例：** - 跨越多个数量级的数据 - 人口、GDP、财富分布 - 对数坐标轴 - 指数增长可视化 **重要：** 域值必须严格为正数 (>0)。 ### 时间比例尺 (Time scale) 专门用于时间数据的线性比例尺。 javascript const timeScale = d3.scaleTime() .domain([new Date(2020, 0, 1), new Date(2024, 0, 1)]) .range([0, 800]); timeScale(new Date(2022, 0, 1)); // 返回 400 // 反转以获取日期 timeScale.invert(400); // 返回 2022 年中期的 Date 对象 **用例：** - 时间序列可视化 - 时间轴 - 时间动画 - 基于日期的交互 **方法：** - `.nice()` - 将域扩展到整齐的