D3.js条形图-将标签与自定义条形图宽度对齐

我试图创建一个显示动态数据的条形图，这意味着加载时可能会有1-10个条形图。默认情况下，标签正确对齐到每个条的中心。然而，对于我的条形图，我需要缩短每个条形图的宽度

我已尝试更改以下代码行：

height = 200 - margin.top - margin.bottom;

这成功地减小了条形图的宽度，但通过减小图形的总体大小来实现

此外，我还尝试在以下代码中更改height属性：

 svg.selectAll(".bar")
    .data(data)
  .enter().append("rect")
    .attr("class", "bar")
    .attr("width", function(d) {return x(d.value); } )
    .attr("y", function(d) { return y(d.label); })
    .attr("height", y.bandwidth())

这将成功调整栏的大小，但将标签移出对齐

当给定自定义宽度时，是否有人可以帮助我使标签自动重新对齐到条的中心？我已经附加了一个到JSFIDLE的链接，以帮助可视化我的问题

就在那里，使用它：

var y = d3.scaleBand()
    .range([height, 0])
    .padding(0.4);//tweak this value here

这是您的最新小提琴，填充为0.4：