d3.js - d3.js：无法在 rangeRoundBands 上进行填充？

Question

我正在尝试在条形之间绘制带有填充的条形图，但我无法rangeRoundBands插入填充 - 尽管文档告诉我这是可能的，所以我做错了。

这是我的代码：

var x0 = d3.scale.ordinal()
 .rangeRoundBands([margin.left, width], 0.1, 0.1);

... 

ap_bars.transition().duration(1000)
  .attr("x", function(d, i) {
    return i * x0.rangeBand();
  })
  .attr("width", x0.rangeBand());

但是所有的酒吧都堆叠在一起。

JSFiddle在这里：http: //jsfiddle.net/6pnem/5/

Answer 1

您正在使用填充正确更改带的大小，但是您绘制条的方式也会将它们并排放置在彼此旁边。当您增加填充时，您会看到条形图变得越来越细，但仍被挤压在一起。

而不是使用基于数据索引的常量 ( i * x0.rangeBand())，您需要根据缩放数据定位条： ( x0(d))。您可能需要调整条形图的位置，使条形图的中心成为每个波段的中心：( x0(d) - x0.rangeBand() * 0.5)。