svg - 如何在 nvd3 图表中添加边距

Question

我正在使用 nvd3.js 库及其水平图http://nvd3.org/ghpages/multiBarHorizo ​​ntal.html 我正在尝试通过以下 css 在条形之间添加一些边距，但不起作用。 http://jsfiddle.net/petran/x7Cdz/1/

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

还有另一种方法可以做到这一点吗？

Answer 1

.margin（{上：30，右：20，下：50，左：175}）

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

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);
                    }
                }
            }
        };