如何在nvd3图表中添加边距

Question

我正在使用nvd3.js库和它的水平图表http://nvd3.org/ghpages/multiBarHorizontal.html。我尝试通过以下CSS添加一些间距，但并没有起作用。http://jsfiddle.net/petran/x7Cdz/1/。

rect {
display: inline-block;
margin-top: 25px;
margin-bottom: 5px;}

有没有其他方法来完成这个任务？

- Petran

---

那行不通。SVG 样式不理解 margin-top 和 margin-bottom。看起来该库默认不支持在条形之间添加 padding。如果你想要添加，可能需要在这里添加：https://github.com/novus/nvd3/blob/master/src/models/multiBarHorizontal.js#L160 - WolfgangCodes

Answer 1

.margin({top: 30, right: 20, bottom: 50, left: 175})

可以设置元素的上、右、下、左边距。

http://nvd3.org/livecode/index.html#codemirrorNav

是一个网站链接。

- silvster27

Answer 2

根据您的需要自定义图表选项。您可以像下面所示添加边距到图表选项中。

 $scope.options = {
            chart: {
                type: 'multiBarHorizontalChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 55
                },
                x: function(d){return d.label;},
                y: function(d){return d.value;},
                //yErr: function(d){ return [-Math.abs(d.value * Math.random() * 0.3), Math.abs(d.value * Math.random() * 0.3)] },
                showControls: true,
                showValues: true,
                duration: 500,
                xAxis: {
                    showMaxMin: false
                },
                yAxis: {
                    axisLabel: 'Values',
                    tickFormat: function(d){
                        return d3.format(',.2f')(d);
                    }
                }
            }
        };

- Saniya syed qureshi