如何在 nvd3 分组多条形图中的分组条形图中的条形之间添加空间？

Question

我正在尝试为 nvd3 多条形图添加一些空间/填充。 “groupSpacing”不是我需要的，因为它只会增加组之间的空间。我需要组内每个酒吧之间的空间。我在github support 中找到了一个链接。您可以发布任何解决方案或调整吗？

我还找到了d3 example of grouped bar chart。这个例子中的任何帮助对我也很有帮助。

谢谢。

Answer 1

我已经画了一个 d3 组条形图：

fiddle

您可以通过更改第 56 行的代码来调整 groupSpacing：

var groupSpacing = 6;

从技术上讲，我只是通过改变每个矩形的宽度来实现它：

var barsEnter = bars.enter().append('rect')
                .attr('class', 'stm-d3-bar')
                .attr('x', function(d,i,j) {
                    return (j * x1.rangeBand() );
                })
                .attr('y', function(d) { return y(d.y); })
                .attr('height', function(d) { return height - y(d.y); })
                .attr('width', x0.rangeBand() / barData.length - groupSpacing )
                .attr('transform', function(d,i) { 
                  return 'translate(' + x0(d.x) + ',0)'; 
                })
                .style("fill", function(d, i, j) { 
                  return color(data[j].key); 
                });

希望它可以帮助您了解如何在 d3 中实现它。

Answer 2

我也从“宽度”属性中减去组间距的数量。我发现 x 轴标签在我这样做后看起来有点不对劲，所以我将（组间距 / 2）添加到“x”属性。这是我的代码示例。

var groupSpacing = 15;
var rect = groups.selectAll("rect")
  .data(function (d) { return d; })
  .enter()
  .append("rect")
  .attr("x", function (d) { return x(d.x) + (groupSpacing / 2) ; })
  .attr("y", function (d) { return y(d.y0 + d.y); })
  .attr("height", function (d) { return y(d.y0) - y(d.y0 + d.y); })
  .attr("width", x.rangeBand() - groupSpacing)