这个额外的空白是从哪里来的？答案

【问题标题】：Where is this extra whitespace coming from?这个额外的空白是从哪里来的？
【发布时间】：2019-02-11 16:36:25
【问题描述】：

我正在使用c3.js 创建仪表图。我将高度和宽度都设置为75，因为这是我想要的仪表的正确大小，但是当它们生成时，容器中总是有额外的空白让我感到困惑。

我真的希望创建的svg 的高度为 60，以便正确向上移动标签。问题是，当我将图表的高度/宽度设置为 60 时，仪表本身的大小会因为这个额外的空白而变得太小。

我尝试将我所知道的所有内容的填充设置为 0。我搜索了文档，总有可能我忽略了一些东西。我总是可以尝试做一些 hacky css 来解决它，但在我这样做之前，如果可以的话，我想更改配置中的某些内容。

基本上，我希望图表占据我指定的完整尺寸。我指定不显示的图例似乎仍在占用图表应使用的空间。

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

});

【问题讨论】：

为了将来参考，请记住将示例代码放在问题本身中，而不是放在 jsfiddle 上，以避免链接腐烂使问题对未来用户无用的风险。这里的“code sn-p”工具支持jsfiddle的所有功能
可以在底部放一些负边距
@CoderinoJavarino 我可以，但是如果图书馆有一些我缺少的东西，我想避免一个 hacky 解决方案。
使用 D3.js，它不会添加任何不需要的东西。看看这个：bl.ocks.org/tomerd/1499279

标签： javascript d3.js c3.js

【解决方案1】：

您将很难控制c3。它在计算轴、图例等的位置时做了很多工作......你甚至没有使用。

我认为你有两个选择：

直接使用d3 自己编码
求助于小黑客。比如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>

【讨论】：