国内外网站开发有哪些技术电商
比例尺的使用
- 一、比例尺是什么？
- 典型示例：
- 二、常用比例尺类型
- 1. 线性比例尺 (scaleLinear)
- 2. 序数比例尺 (scaleOrdinal)
- 3. 其他常用比例尺类型：
- 三、实际应用
- 主要改进点说明
- 四、比例尺的高级用法
- 1. 颜色比例尺
- 2. 时间比例尺
- 3. 分段比例尺
- 小结
- 下章预告：结合比例尺使用坐标轴，创建更专业的图表
比例尺是 D3.js 中非常重要的概念，它能帮助我们优雅地将数据从定义域映射到可视化的值域中。下一章我们将学习坐标轴的使用，它经常与比例尺配合使用。
一、比例尺是什么？
比例尺是数据可视化的核心工具，它能将"一个区间"的数据（通常是原始数据）映射到"另一个区间"（通常是像素值或颜色）。这种映射关系在数据可视化中极为常见。
典型示例：
- 数值映射：[0, 1] 对应到 [0, 300]，当输入 0.5 时，输出 150
- 离散映射：[0, 1, 2] 对应到 [“red”, “green”, “blue”]，当输入 2 时，输出 “blue”
在比例尺中，有三个关键概念：
- 定义域 (domain)：原始数据的取值范围，如 [0, 1] 或 [0, 1, 2]
- 值域 (range)：映射后的目标取值范围，如 [0, 300] 或 [“red”, “green”, “blue”]
- 对应法则：定义域和值域之间的映射规则
理解这三个概念是掌握比例尺的基础。D3.js 提供了多种比例尺类型，适用于不同的数据映射场景。
二、常用比例尺类型
1. 线性比例尺 (scaleLinear)
线性比例尺是最常用的比例尺类型，它将连续的定义域线性地映射到连续的值域。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>比例尺的使用</title><script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body></body>
<script>// 创建线性比例尺var scaleLinear = d3.scaleLinear().domain([0, 3]) // 定义域：输入范围是0到3.range([0, 300]); // 值域：输出范围是0到300像素// 测试比例尺console.log(scaleLinear(0)); // 输出 0console.log(scaleLinear(1)); // 输出 100console.log(scaleLinear(2)); // 输出 200console.log(scaleLinear(3)); // 输出 300
</script>
</html>
特性说明：
- 输入值在定义域外时，默认会进行外推计算
- 可以通过
.clamp(true)方法限制输出不超过值域范围 - 支持反向映射
.invert()，可以从输出值反推输入值
2. 序数比例尺 (scaleOrdinal)
序数比例尺用于离散数据的映射，它将离散的定义域映射到离散的值域。
var colors = ['blue', 'red', 'green', 'pink'];
// 创建序数比例尺
var scaleOrdinal = d3.scaleOrdinal().domain([0, 1, 2, 3]) // 定义域：离散值.range(colors); // 值域：颜色数组// 应用比例尺创建彩色文本
for (var i = 0; i < colors.length; i++) {d3.select('body').append('div').text('请看我的颜色').style('color', scaleOrdinal(i));
}
特性说明：
- 当输入值不在定义域中时，比例尺会循环使用值域中的值
- 可以通过
.unknown(value)方法设置未知输入的默认返回值 - 常用于类别数据到颜色、符号等的映射
3. 其他常用比例尺类型：
-
scaleBand(): 用于条形图的波段比例尺 -
scaleTime(): 专门用于时间数据的线性比例尺 -
scaleQuantize(): 将连续数据离散化到多个区间 -
scaleSqrt(): 基于平方根的比例尺，适合面积映射
三、实际应用
👇 示例：让我们用比例尺改进上一章的柱状图示例：
<!DOCTYPE html>
<html><head><script src="https://d3js.org/d3.v7.min.js"></script><style>.bar {transition: all 0.3s;}.bar:hover {opacity: 0.8;}.bar {rx: 3px;/* 圆角 */filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));}.label {font-family: Arial;dominant-baseline: middle;/* 垂直居中 */}</style>
</head><body><svg width="600" height="300"></svg><script>// 模拟数据const dataset = [730, 530, 330, 230, 130];// 1. 选择容器const svg = d3.select("svg");// 2. 创建图表区域const chart = svg.append("g").attr("transform", "translate(50, 30)");// 3. 创建比例尺const xScale = d3.scaleLinear().domain([0, d3.max(dataset)]) // 定义域从0到数据最大值.range([0, 500]); // 值域映射到0-500像素// 4. 数据绑定与图形创建（使用比例尺）chart.selectAll(".bar").data(dataset).enter().append("rect").attr("class", "bar").attr("x", 0).attr("y", (d, i) => i * 35) // 每个柱形间隔35px.attr("width", d => xScale(d)) // 使用比例尺计算宽度.attr("height", 25) // 固定高度.attr("fill", "#4CAF50"); // 初始颜色// X轴（使用比例尺的最大值）chart.append("line").attr("x1", 0).attr("y1", dataset.length * 35).attr("x2", xScale(d3.max(dataset))) // 使用比例尺.attr("y2", dataset.length * 35).attr("stroke", "#333").attr("stroke-width", 1);// 数据标签（使用比例尺）chart.selectAll(".label").data(dataset).enter().append("text").attr("class", "label").attr("x", d => xScale(d) + 5) // 在柱形右侧显示（使用比例尺）.attr("y", (d, i) => i * 35 + 18).text(d => d).attr("font-size", "12px").attr("fill", "#666");// 交互效果（保持不变）d3.selectAll(".bar").on("mouseover", function () {d3.select(this).attr("fill", "#FF5722");}).on("mouseout", function () {d3.select(this).attr("fill", "#4CAF50");});// 添加提示框（保持不变）const tooltip = d3.select("body").append("div").style("position", "absolute").style("visibility", "hidden").style("background", "#fff").style("padding", "5px 10px").style("border-radius", "4px").style("box-shadow", "0 2px 4px rgba(0,0,0,0.2)");// 交互逻辑（保持不变）d3.selectAll(".bar").on("mouseover", function (event, d) {tooltip.style("visibility", "visible").html(`数值：${d}`);}).on("mousemove", function (event) {tooltip.style("left", `${event.pageX + 10}px`).style("top", `${event.pageY - 20}px`);}).on("mouseout", function () {tooltip.style("visibility", "hidden");});</script>
</body></html>
👇 效果如下
主要改进点说明
-
添加了线性比例尺：
const xScale = d3.scaleLinear().domain([0, d3.max(dataset)]).range([0, 500]); -
柱状图宽度使用比例尺：
.attr("width", d => xScale(d)) // 替换原来的直接使用数据值 -
X轴长度使用比例尺：
.attr("x2", xScale(d3.max(dataset))) // 替换原来的d3.max(dataset) -
数据标签位置使用比例尺：
.attr("x", d => xScale(d) + 5) // 替换原来的d + 5
优势说明：
-
自动适配数据范围： 当数据集变化时，比例尺会自动调整映射关系
-
更好的控制： 可以通过调整range值来控制图表的最大宽度
-
可维护性： 如果需要调整图表尺寸，只需修改比例尺的range值
-
一致性： 所有基于数据的图形元素使用相同的比例尺，保证视觉一致性
四、比例尺的高级用法
1. 颜色比例尺
D3提供了专门处理颜色渐变的比例尺：
// 创建颜色比例尺
var colorScale = d3.scaleLinear().domain([0, 10]).range(["white", "steelblue"]);// 使用
colorScale(5); // 返回中间色
2. 时间比例尺
处理时间数据的专用比例尺：
var timeScale = d3.scaleTime().domain([new Date(2020, 0, 1), new Date(2020, 11, 31)]).range([0, 800]);timeScale(new Date(2020, 5, 15)); // 返回年中位置
3. 分段比例尺
将连续数据分段映射：
var quantizeScale = d3.scaleQuantize().domain([0, 100]).range(["low", "medium", "high"]);quantizeScale(30); // 返回"low"
quantizeScale(60); // 返回"medium"
小结
- 合理设置定义域： 使用
.domain([d3.min(data), d3.max(data)])自动适应数据范围 - 考虑边距： 在设置值域时预留边距空间
- 处理异常值： 使用
.clamp(true)防止超出范围的值 - 保持比例尺的可读性： 给比例尺变量起有意义的名称
- 重用比例尺： 在多个可视化中共享相同的比例尺保证一致性