如何在nvd3组合式多条形图的组合式条形图中的条形之间添加空格? [英] How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?
问题描述
我正在尝试为nvd3多条形图添加一些空间/填充. "groupSpacing"不是我所需要的,因为它仅在组之间增加了空间.组中每个栏之间都需要有空间.我在 github支持中找到了一个链接.您可以发布任何解决方案或调整吗?
I'm trying to add some space/padding for a nvd3 multi bar chart. "groupSpacing" is not what I need, since it only adds space between groups. I'll need space between each bar inside group. I found one link in github support. Can you post any solution or tweak?
我还找到了 d3分组条形图的示例.此示例中的任何帮助对我也非常有帮助.
I also found a d3 example of grouped bar chart. Any help in this example also very helpful to me.
谢谢.
推荐答案
我绘制了一个d3组条形图:
I have draw a d3 group barchart:
您可以通过更改第56行的代码来调整groupSpacing:
You can adjust the groupSpacing by change the code on line 56:
var groupSpacing = 6;
从技术上讲,我只是通过更改每个矩形的宽度来实现的:
Technically i just achieve it by change the width of each rects' width:
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中实现它.
Hope it helps you understand how you can achieve it in d3.
这篇关于如何在nvd3组合式多条形图的组合式条形图中的条形之间添加空格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!