我正在尝试为 nvd3 多条形图添加一些空间/填充。 “groupSpacing”不是我需要的,因为它只会增加组之间的空间。我需要组内每个栏之间的空间。我找到了一个链接github支持 https://github.com/novus/nvd3/issues/476。您可以发布任何解决方案或调整吗?
我还找到了一个d3 分组条形图示例 http://bl.ocks.org/mbostock/3887051。这个例子中的任何帮助对我也非常有帮助。
Thanks.
我画了一个 d3 组条形图:
fiddle http://jsfiddle.net/ramseyfeng/8790t2vk/
您可以通过更改第 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 中实现它。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)