D3 v3中rangeRoundBands功能及参数作用咨询

我太懂这种无奈了——攥着一堆D3 v3的老代码没法升级，查资料搜出来全是v4改成bandScale()的内容，想找纯v3的说明真的费劲！别慌，下面就把rangeRoundBands()的功能、参数给你讲得明明白白：

核心功能是什么？ #

rangeRoundBands()是D3 v3里**序数比例尺（ordinal scale）**的专属方法，专门为柱状图、条形图这类需要等宽区块的可视化场景设计。它的核心工作就是：把你指定的一段连续数值范围（比如图表的总宽度/高度），均匀分割成和你定义域（domain）长度一致的若干个"刻度带"，同时自动计算带之间的间距，并且保证所有带的宽度、间距都是整数——这一点特别重要，能避免半像素渲染导致的模糊线条问题。

每个参数具体怎么用？ #

它的完整调用语法是这样的：

ordinal.rangeRoundBands(interval[, padding[, outerPadding]])

逐个拆解参数：

• interval（必传参数）
  这是一个包含两个数值的数组，代表你要分配的连续范围。比如做横向柱状图时，你可能传[0, 图表总宽度]；如果是纵向条形图，因为D3默认y轴向下为正，通常会传[图表总高度, 0]来让条形向上生长。这个范围会被分割成对应你定义域（比如分类数组）长度的多个带。

• padding（可选，默认值0）
  这个参数控制相邻两个带之间的空隙比例，取值是0到1之间的小数。举个例子，如果你设为0.2，就意味着两个带之间的空隙宽度是单个带宽度的20%。数值越大，带之间的空隙就越宽，带本身就越窄，适合分类较多的场景。

• outerPadding（可选，默认值0）
  这个参数管的是最外侧的带和整个范围边界的空隙比例，同样是0到1之间的小数。比如设为0.1，那么第一个带左边、最后一个带右边的空隙，就是单个带宽度的10%。加这个参数能让图表边缘不紧贴容器，视觉上更舒服。

实用小补充 #

当你用rangeRoundBands()设置好比例尺后，还可以用ordinal.rangeBand()方法获取单个带的精确宽度，这个值在绘制矩形（比如柱状图的柱子）时特别常用，直接拿来当rect的width属性就行。

举个简单的实际例子：

// 定义一个有4个分类的序数比例尺
var xScale = d3.scale.ordinal()
    .domain(["苹果", "香蕉", "橙子", "葡萄"])
    .rangeRoundBands([0, 400], 0.2, 0.1);

// 获取每个柱子的宽度
var barWidth = xScale.rangeBand(); // 会返回一个整数，比如72

内容的提问来源于stack exchange，提问作者bharal