文章目录
《D3.js in Action》全新第三版封面
3.4.3 分段比例尺 Band scale
绘制示例条形图要用到的第二种比例尺为 分段比例尺（band scale）。它属于之前介绍的第四类（详见 3.4.1 节内容）：接受离散型输入、返回连续型输出。要在可用空间内处理离散的各矩形条的分布，这正是 D3 分段比例尺的强项。
声明一个分段比例尺，需要调用 d3.scaleBand() 函数。在以下代码片段中，分段比例尺赋给了常量 yScale，表示它将负责 y 轴方向的元素排布。该比例尺的定义域，是一个包含数据集所有技术（technology）名称的数组，可通过 JavaScript 的 map() 函数生成（关于 map() 的用法，可参考前面的 1.2.5 节内容）。至于比例尺的值域，则覆盖所有可用的垂直空间，即从 SVG 容器顶部的 0 像素一直到其底部的 700px：
const yScale = d3.scaleBand()
.domain(data.map(d => d.technology))
.range([0, 700]);
向 createViz() 内部加入该比例尺，并写在数据绑定逻辑的代码前面。当使用数据集中的某项技术调用该函数时，会得到该技术对应的矩形条垂直坐标。例如，将字符串 "Excel" 传给 yScale，将得到 0，因为与 Excel 对应的矩形条是条形图中的第一个矩形，位于最上方；同理，若传入 "D3.js"，则返回 272.72，它代表 D3 对应的矩形条左上角的垂直坐标：
yScale("Excel") // => 0
yScale("D3.js") // => 272.72
之前每个矩形条的 y 属性值是通过手动计算得到的，还有印象吗？现在有了分段比例尺，我们可以非常轻松地用它来算出各矩形条的实际纵坐标：
svg
.selectAll("rect")
.data(data)
.join("rect")
...
.attr("y", d => yScale(d.technology))
...
分段比例尺还提供了一个非常方便的工具方法：bandwidth()。它会返回矩形条的厚度。该厚度与矩形条的数量和可用空间成正比。本例中，该厚度即为矩形条的 height 属性值。如以下代码段所示，可以通过分段比例尺的 bandwidth() 方法来设置 height 属性：
svg
.selectAll("rect")
.data(data)
.join("rect")
...
.attr("height", yScale.bandwidth())
...
保存项目并在浏览器中查看，会看到如图 3.27 所示的效果。条形图填满了 SVG 容器所有可用的垂直空间。由于各矩形条间没有间隙，条形图看起来十分拥挤，阅读体验极差。
【图 3.27 配置了分段比例尺但没有设置间距的条形图效果】
间距的问题可以通过分段比例尺的 paddingInner() 属性（property）来解决。该属性专门用于指定各矩形条间的内边距（padding）大小，并接受一个 0 到 1 之间的值，这里设置为 0.2，表示大小为矩形条高度的 20%：
const yScale = d3.scaleBand()
.domain(data.map(d => d.technology))
.range([0, 700])
.paddingInner(0.2);
完成以上设置后，重新加载示例页面，条形图的布局看起来就好多了，如图 3.28 所示：
【图 3.28 配置了分段比例尺并添加间隙后的条形图效果】
而图 3.29 则梳理并复盘了 D3 分段比例尺的工作原理。首先是接受一个定义域，即数据集中的技术列表，并令其均匀分布到指定的值域内（即 SVG 容器垂直方向上的可用空间）。各矩形条的左上角垂直坐标可以通过调用分段比例尺函数计算得到（如 yScale("PowerPoint")）；同理，调用该比例尺的 bandwidth() 方法可以得到矩形条的高度值（即 yScale.bandwidth()）。最后是各矩形条的间距，默认情况下为 0，手动设置间距可以通过指定分段比例尺的 paddingInner() 属性实现（property）。它接受一个 0 到 1 之间的值，代表当前每个矩形条间的内边距大小（同时也表示其相对于矩形条高度 height 的百分比值）。
【图 3.29 分段比例尺在垂直方向的可用空间内均匀排布技术列表时的原理图】
