D3 scaleBand与scalePoint适用场景有什么区别

我第一次在 D3 里同时做柱形图和折线图时，最容易犯的错不是颜色或动画，而是把分类轴的“位置”误当成了“可用宽度”。scaleBand 和 scalePoint 都能接收一组字符串分类并映射到横向坐标，但它们保护的图表语义不同：前者给每个分类留出一段带宽，后者只给出一个位置。

官方地址：https://d3js.org/

简单判断：要画矩形、需要计算 x 和 width，就优先用 scaleBand；要画点、折线节点或只放分类刻度，就优先用 scalePoint。两者都要根据分类数量和可读性调整留白。

下面的比较以 D3 官方 d3-scale 文档为依据，代码只展示 API 关系，不把示意图当成运行截图。

先保护图表语义：分类是区间还是位置

把图表看成一项需要保护的资产，会更容易选对 scale。资产是“每个分类在画布上占据的几何语义”：柱形图中的“销售额”需要一个矩形区间，折线图中的“周一”通常只是一个采样位置。误用路径也很典型：用 scalePoint 给柱子定位，随后拿到的 bandwidth() 为零；或者把 scaleBand 的起点当成折线点的中心，导致点整体偏向每个分类的一侧。

我的做法是先问一句：这个分类下面的图元有没有“占宽度”的事实？有，就让 scale 输出带宽；没有，就让它只输出中心位置。这个判断比先背 API 名称更可靠。

我实际使用时最明显的差异：bandwidth 是否存在

scaleBand 把连续范围切成均匀的 band。调用分类值时得到的是对应 band 的起点，还可以通过 bandwidth() 取得每个 band 的宽度；paddingInner 控制 band 之间的空隙，paddingOuter 控制首尾留白。

const categories = ["一月", "二月", "三月"];

// 柱形需要起点和宽度，所以使用 band scale。
const xBand = d3.scaleBand()
  .domain(categories)
  .range([0, 600])
  .padding(0.2);

// xBand("一月") 是矩形左边界，bandwidth() 是矩形宽度。
const barX = xBand("一月");
const barWidth = xBand.bandwidth();

scalePoint 则是带宽固定为零的 band 变体。它更适合散点或折线的分类位置，不应该再把它当作柱子的宽度来源：

const xPoint = d3.scalePoint()
  .domain(categories)
  .range([0, 600])
  .padding(0.5);

// 折线节点只有一个 x 位置；point scale 的 bandwidth 永远为 0。
const pointX = xPoint("一月");
const pointWidth = xPoint.bandwidth();

这里的风险不是“某个 API 不能调用”，而是调用结果的含义变了。柱形的 rect 需要同时设置 x 与 width；折线的点只需要 cx，宽度可以由圆点半径或线条样式决定。

按图元选择：柱形图用 band，折线和散点用 point

我现在会把选择拆成三个问题：图元是否有面积、分类标签是否需要均匀分布、同一分类下是否还要嵌套第二个系列。

一个容易被忽视的代价是：scaleBand 的起点位于 band 边缘。如果把折线节点放在 band 上，通常要加上 bandwidth() / 2 才接近每个分类的中心，但这会把“矩形区间”和“中心点”混在一起。若整张图本来就是折线，直接使用 scalePoint 更清楚。

padding 与坐标轴：留白是布局控制，不是图元类型

两种 scale 都有 range、domain、align、round 和 step 等共同概念，但留白 API 不完全相同。band scale 可以分别控制内外留白；point scale 的 padding 主要对应首尾外留白。需要柱间空隙时，不要拿 point scale 硬凑。

// 分类 scale 不实现连续数值 scale 的 ticks，分类轴应显式提供刻度值。
const axis = d3.axisBottom(xPoint)
  .tickValues(categories);

// band scale 的外部留白会影响首尾位置，先确认图元宽度再调 align。
const xBars = d3.scaleBand()
  .domain(categories)
  .range([0, 600])
  .paddingInner(0.15)
  .paddingOuter(0.1)
  .align(0.5);

D3 官方轴文档说明，band 和 point 没有连续 scale 的 ticks 方法，给轴调用 ticks(5) 不会替你筛选分类。分类较多时，可以先决定要显示哪些值，再传给 tickValues；这属于标签审计，不是 scale 的职责。

最后的选择清单：避免把位置、宽度和刻度混为一谈

• 矩形需要宽度：选 scaleBand，同时读取 bandwidth()。
• 点或折线只需要坐标：选 scalePoint，记住其 bandwidth() 为零。
• 分类轴不要依赖连续刻度推断，必要时显式设置 tickValues。
• 出现重叠或首尾太挤，先调整 padding 与 range，再检查文本标签，不要立即更换 scale。

我对这两个 API 的最终判断是：它们不是“哪个更高级”的替代品，而是对图元空间的不同承诺。scaleBand 保护的是一段可绘制面积，scalePoint 保护的是一个稳定位置。只要先说清楚图表资产是什么，选择就会自然很多。

常见问题

scaleBand 能不能用来画折线？

可以，但需要把节点放在 band 中心，例如使用起点加上 bandwidth() / 2。如果没有柱形或其它有宽度图元，直接使用 scalePoint 通常更容易表达意图。

scalePoint 为什么没有柱子的宽度？

它的设计就是把每个分类映射到一个点，官方文档将其描述为 bandwidth 固定为零的 band 变体。因此柱形宽度要由 band scale 或其它布局规则提供。