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

Question

我正在尝试为nvd3多条形图添加一些空格/填充."groupSpacing"不是我需要的,因为它只增加了组之间的空间.我需要在组内的每个栏之间留出空间.我在github支持中找到了一个链接.你可以发布任何解决方案或调整？

我还找到了分组条形图的d3示例.这个例子中的任何帮助对我都很有帮助.

谢谢.

Answer 1

我画了一个d3组条形图:

小提琴

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

var groupSpacing = 6;

从技术上讲,我只是通过改变每个rects'宽度的宽度来实现它:

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中实现它.