这哪里是多余的空格是从哪里来的？

Question

我使用c3.js创造仪图表。我设置的高度和宽度都以75，因为这是我想要的计大小合适，但是得到产生时，他们，总是有多余的空格在搞乱真实我的容器。

我真的希望时生成具有60的高度，以便正确地移动标签了svg。问题是，当我设置图表的高度/宽度为60，仪表本身的尺寸变，因为这多余的空格的方式太小。

我试过设置，我知道为0。我已经通过文件搜索的一切的填充，总是有，我已经忽略了一些机会。我总是可以尝试做一些哈克CSS来绕过它，但在此之前我这样做，我想，如果我可以改变一些东西的配置。

从本质上讲，我希望图表占用我指定的全尺寸。看来，传说中，我指定不显示，仍占用空间图表应该使用。

http://jsfiddle.net/kLsox4ya/1/

<div class='row'>
  <div class="col-12" id="chart"></div>
  <p class="col-12 f-small">PERFECT</p>
</div>

var chart = c3.generate({
   bindto: '#chart',
   data: {
       columns: [['data', 0]],
       type: 'gauge'
   },
   gauge: {
       fullCircle: true,
       startingAngle: 2 * Math.PI,
       width: 3,
       expand: false,
       label: {
          show: false
        }
   },
   size: {
       height: 75,
       width: 75
   },
   legend: {
       show: false
   },
   interaction: {
       enabled: false
   }

});

Answer 1

你将有一个很难越过c3那么多的控制。它做了很多的引擎盖来计算轴，传说等位置下......，你甚至不使用。

我认为你有两个选择：

1. 代码它自己使用直d3
2. 再打一点两轮牛车。例如here，我手动调节高度它呈现后。

var chart = c3.generate({
        bindto: '#chart',
        data: {
            columns: [['data', 90]],
            type: 'gauge'
        },
        tooltip: {
            show: false
        },
        color: {
            pattern: ['#565656', '#cfd628', '#e8b532', '#28d632'],
                threshold: {
                values: [40, 80, 90, 100]
            }
        },
        gauge: {
            fullCircle: true,
            startingAngle: 2 * Math.PI,
            width: 3,
            label: {
                format: function (value, ratio) {
                    return '';
                },
                extents: function (value) {
                    return '';
                }
            }
        },
        size: {
            height: 75,
            width: 75
        },
        legend: {
            show: false
        },
        interaction: {
            enabled: false
        },
        axis: {
            x: {
                show: false
            },
            y: {
                show: false
            }
        },
        padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },
        onrendered: function(){
        	this.svg.attr('height', 55);        	
        }

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class='row'>
  <div class="col-12" id="chart"></div>
  <p class="col-12 f-small">PERFECT</p>
</div>