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

Question

我正在尝试在条形图之间绘制一个带有填充的条形图，但是我不能让rangeRoundBands插入填充 - 尽管the docs tell me this is possible，所以我做错了。

这是我的代码：

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）。