Как добавить поля в 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;} 

Есть еще один способ сделать это?

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