Javascript 如何在d3.js v4中设置连续刻度（如scaleLinear）上的填充？

我正在尝试在我的直方图中设置条形填充，其方式与使用有序刻度时的方式大致相同：

x = d3.scaleLinear()
    .domain([fist, last])
    .rangeRound([bottom, top])
    .padding(someFractionBetweenZeroAndOne)

没有。那不行。因此，我转向了在连续刻度上没有

.padding

方法

好吧，我可以手动计算我的条宽，但真的没有集成的

填充
解决方案可用于连续缩放吗？
在线性缩放中使用填充毫无意义

但是，有几种方法可以为条形图添加一些空间，比如使用组（就像Bostock在中所做的那样），并在组内设置矩形的位置，使其与相邻的矩形之间有一些空间

另一种选择是更改矩形的位置和尺寸（如您所说，“手动计算我的条形宽度”）。例如，在这个演示中，我将每个条的宽度更改为每个箱子宽度的90%


var data=[{x:0，y:10}，
{x:2，y:40}，
{x:4，y:70}，
{x:6，y:30}，
{x:8，y:20}]；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，300）
.attr（“高度”，200）；
var xScale=d3.scaleLinear（）
.domain（[0,10]）
.范围（[0，300]）；
var barWidth=xScale.domain（）[1]/data.length；
var yScale=d3.scaleLinear（）
.domain（[0,80]）
.范围（[200,0]）；
var bars=svg。选择全部（“.bars”）
.数据（数据）
.输入（）
.append（“rect”）；
attr（“x”，函数（d）{return xScale（d.x）}）
.attr（“y”，函数（d）{return yScale（d.y）}）
.attr（“宽度”，函数（d，i）{return xScale（barWidth）*0.9}）
.attr（“高度”，函数（d）{return 200-yScale（d.y）}）
rect{
填充物：青绿色；
}
是的，目前我正在以类似的方式计算钢筋宽度和偏移量。更相关的是，鉴于其最终目标通常是在连续尺度上显示有序函数（即我试图做的事情），因此是否有任何方法可以将填充应用于直方图bin函数（以调整x0和x1）？据我所知，x0和x1是由直方图函数自动生成的。我建议你把这个特定的问题作为另一篇文章发表。实际上，我猜从技术上来说，答案仍然是：这没有意义，因为如果你有一个箱子，它的第一个箱子刻度是
[0,10]
，有20%的填充空间来有效显示
[1,9]
观察者可能会混淆
0.5
的值是否落在该容器中。事实上：类间隔之间不能有空格（）。您可以只操纵图形结果，但只需最小值来分隔条。