跳到主要内容

比例尺与坐标轴

比例尺 (Scales) 是 D3 中非常强大且必不可少的功能，它将输入的值映射到输出的值。通常用于将数据空间 (Data Space) 映射到显示空间 (Display Space)。

什么是比例尺？​

比例尺是一个函数，接收输入值，返回输出值。

  • Domain (定义域): 输入值的范围（通常是数据的最小值到最大值）。
  • Range (值域): 输出值的范围（通常是在网页上显示的像素范围，如 0 到 500）。

常用比例尺​

D3 提供了多种类型的比例尺，以满足不同类型数据的需求。

1. 线性比例尺 (Linear Scale)​

适用于数值型连续数据。

const scale = d3.scaleLinear()
  .domain([0, 100]) // 数据范围
  .range([0, 500]); // 像素范围

console.log(scale(50)); // 返回 250

2. 条形比例尺 (Band Scale)​

适用于分类数据（如条形图的 x 轴）。

const scale = d3.scaleBand()
  .domain(['苹果', '香蕉', '橙子'])
  .range([0, 300])
  .padding(0.1); // 条形之间的间隔

console.log(scale('香蕉')); // 返回 100

3. 序数比例尺 (Ordinal Scale)​

适用于分类数据并将其映射到颜色或其他值。

const colorScale = d3.scaleOrdinal()
  .domain(['A', 'B', 'C'])
  .range(d3.schemeCategory10); // 使用 D3 的内置配色方案

坐标轴 (Axes)​

坐标轴是基于比例尺自动生成的。D3 提供了一组现成的坐标轴生成器。

  • d3.axisBottom(scale): 生成位于底部的坐标轴。
  • d3.axisLeft(scale): 生成位于左侧的坐标轴。
  • d3.axisTop(scale)
  • d3.axisRight(scale)

绘制坐标轴示例​

// 假设创建了 x 和 y 比例尺
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

// 在 SVG 中绘制
const svg = d3.select("svg");

svg.append("g")
  .attr("transform", "translate(0, 400)") // 移动到容器底部
  .call(xAxis);

svg.append("g")
  .attr("transform", "translate(50, 0)") // 移动到左侧留白处
  .call(yAxis);

坐标轴属性定制​

您可以通过 ticks() 方法调整刻度的数量，或者通过 tickFormat() 自定义刻度的文本格式：

const xAxis = d3.axisBottom(xScale)
  .ticks(5) // 设置刻度数量
  .tickFormat(d => `$${d}`); // 为数值增加美元符号

理解了比例尺和坐标轴，您就可以开始进行各种图表的精确绘制了。