D3.js D3-在内部钢筋之间添加空间

我有一个演示

这是一张简单的d3图表

酒吧间没有空间。我知道我可以加上这个

常量x=d3.scaleBand（）
.范围（[0，宽度]）
//.填充（0.1）

这将在每个条的两侧增加空间

如何从第一个和最后一个条形图中删除空格，使第一个和最后一个条形图紧靠图表边缘

使用

.paddingner（[0.1]）

仅用于设置文档中的内部填充

以下是工作解决方案：

var originalData=[
{
日期：“一月”，
价值：1507
},
{
日期：“二月”，
价值：1600
},
{
日期：“三月”，
价值：1281
},
{
日期:"四月"，
价值：1898
},
{
日期：“五月”，
货值：1749
},
{
日期：“6月”，
价值：1270
},
{
日期：“7月”，
价值：1712
},
{
日期：“八月”，
价值：1270
},
{
日期：“9月”，
价值：1257
},
{
日期：“10月”，
价值：1257
},
{
日期：“11月”，
货值：1277
},
{
日期：“十二月”，
价值：1057
}
]
/////////////////////////////更新功能
常数随机化数据=（数据）=>{
const rand=Math.floor（Math.random（）*data.length）+2
const newData=data.slice（0，rand）
更新（新数据）
}
/////////////////////////////创建SVG
常数w=400
常数h=250
常量边距={
前20名，
底数：40，
左:40,，
右：20
}
常量宽度=w-margin.left-margin.right
常量高度=h-margin.top-margin.bottom
const svg=d3。选择（“.chart container”）。追加（“svg”）
.attr（“id”、“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
const chart=svg.append（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
常量x=d3.scaleBand（）
.范围（[0，宽度]）
.填充器（[0.1]）；
常数y=d3.scaleLinear（）
.rangeRound（[高度，0]）
const xAxis=chart.append（“g”）.attr（“类”，“轴-x”）
常量yAxis=图表。附加（“g”）。属性（“类”，“轴-y”）
/////////////////////////////////更新功能
//Recalc域
//重绘轴
//进入
//更新
//出口
常量更新=（图形数据）=>{
//基于新数据的Recalc域
//x是缩放带
x、 域（graphData.map（（d）=>d.date））；
y、 域（[0，d3.max（graphData，（d）=>d.value）]；
常量u=图表。选择全部（“.bar”）
.数据（图形数据）
//进入
u、 输入（）
.append（“rect”）
.classed（'bar'，true）
.attr（'x'，（d）=>x（d.date））
.attr（“y”，（d）=>y（d.值））
.attr（“宽度”，x.带宽（））
.attr（“高度”（d）=>高度-y（d.值））
//更新
u、 属性（'x'，（d）=>x（d.日期））
.attr（“宽度”，x.带宽（））
.attr（“y”，（d）=>y（d.值））
.attr（“高度”（d）=>高度-y（d.值））
//出口
u、 退出（）
.删除（）
//基于新数据重新绘制轴
xAxis.call（d3.axisBottom（x））
.attr（“变换”、“平移（0）”、“高度+”）；
yAxis.call（d3.axisLeft（y））
}    
随机化数据（原始数据）；
var button=document.getElementById（'btn'）；
addEventListener（'click'，（）=>randomizeData（originalData））
h1，h2{
字体系列：Lato；
}
#svg{
背景颜色：浅灰色；
}
.酒吧{
形状渲染：边缘清晰；
填充物：中等紫罗兰色；
}
.酒吧标签{
填充物：白色；
}
.酒吧标签{
文本锚定：结束；
}
.网格线{
冲程：#bbb；
}
.grid.勾选：第n个子（4）行{
笔画宽度：3；
行程：#999；
}
.分开{
填充物：浅灰色；
}
.更新btn{
显示：块；
边缘顶部：30px；
}

JS-Bin
更新