在D3.js中，rangeRoundBands()是一个非常有用的函数，它可以让你轻松地计算并分配一组带状区域。 在D3 4中，rangeRoundBands()被移除了，取而代之的是bandwidth(), padding()和paddingInner()等新函数，这些函数提供了更精细的控制，并且可以实现与rangeRoundBands()相同的效果。
旧版代码：
var yScale = d3.scale.ordinal()
.domain(["foo", "bar", "baz"])
.rangeRoundBands([0, height], 0.1, 0.2);在上面的代码中，我们使用rangeRoundBands()函数来计算三个带状区域的位置，并将其映射到高度为height的范围内。参数0.1和0.2指定了区域之间的空隙和区域内部的留白。
新版代码：
var yScale = d3.scaleBand()
.domain(["foo", "bar", "baz"])
.range([0, height])
.padding(0.1)
.paddingInner(0.2);在新版本中，我们使用了scaleBand()函数创建了一个带状比例尺，并使用domain()函数指定了输入域。接下来，我们使用range()函数指定了输出范围。与rangeRoundBands()不同，我们需要使用两个函数来指定区域之间的空隙和区域内部的留白：padding()和paddingInner()。
什么是padding和paddingInner？
padding表示每个带状区域相对于周围元素的空隙大小。例如，如果一个元素的宽度为100像素，而其左侧和右侧都有10像素的填充，则实际宽度为80像素。在新版本中，padding()函数用于指定这种空隙的大小。
而paddingInner则用于指定相邻带状区域之间的空隙大小。例如，如果一个元素的宽度为100像素，而相邻元素之间的间距为20像素，则实际宽度为70像素。在新版本中，paddingInner()函数用于指定这种空隙的大小。
如何使用新版代码？
使用新版代码非常简单。首先，你需要将旧版代码中的rangeRoundBands()函数替换成scaleBand()函数。接下来，你需要使用range()函数来指定输出范围。最后，在新版本中你需要使用padding()和paddingInner()函数来控制空隙和留白的大小。
以下是完整的例子：
-- -------------------- ---- -------
--- ------ - --------------
--------------- ------ -------
---------- --------
-------------
-------------------
--- ----- - -------------
---------------
---------------
-------------- -- ------
-------------在上面的例子中，我们使用scaleBand()函数创建了一个带状比例尺，并使用domain()函数指定了输入域。接下来，我们使用range()函数指定了输出范围，并使用padding()和paddingInner()函数控制了空隙和留白的大小。
最后，我们创建了一个带有y轴刻度的SVG元素，并将其附加到SVG画布上。这就是D3 4新版代码的完整示例。
总结
在D3.js 4中，rangeRoundBands()函数被移除了，取而代之的是bandwidth(), padding()和`padding
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24410