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

Question

我正在使用 c3.js 创建仪表图。我将高度和宽度都设置为 75 因为这是我想要的正确尺寸的仪表，但是当它们生成时，容器中总是有多余的白色 space 弄乱了我向上。

我真的希望创建的 svg 高度为 60，以便正确向上移动标签。问题是，当我将图表的 height/width 设置为 60 时，由于这个额外的白色 space.

，仪表本身的尺寸变得太小了

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

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

<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 进行如此多的控制。它在幕后做了很多工作来计算您甚至没有使用的轴、图例等的位置。

我想你有两个选择：

直接使用代码自己编码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>

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

Where is this extra whitespace coming from?

javascript

d3.js

c3.js