去掉c3折线图的padding

Question

我有一个带有类别 x 轴的 c3 折线图。

 var data = {
  x: "x",
        columns: [
   ["x", "a", "b", "c", "d"],
   ["data1", 0, 1, 2, 3],
   ["data2", 3, 2, 1, 0],
  ],
  labels: true
    };
 var axis = {
        x: {
            type: 'category',
   tick: {
    centered: true,
   },
   padding: 0
        },
  y: {
   padding: {bottom:5, top:5}
  }
    };
 ccChartL = c3.generate({
  bindto: '#ccLdiv',
  data: data,
  axis: axis,
  transition:{duration: 1000}
 });

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<div id="ccLdiv"></div>

在左边，线的起点和轴之间有一个间隙。右边一样。我该如何删除它？我希望行的开头，类别 a，位于 x 值 0。我尝试查看 Whosebug 的答案，但它没有用。填充设置为 0。如果我将它设置为任何正值，它只会缩小更多。提前致谢。

Answer 1

-0.5 或略小 (-0.49) 的负填充将消除这些间隙。

但是它会略微切断您的第一个和最后一个标签，您可能需要某种公式，例如

padding: -0.5 - (0.01 * no_of_datapoints)

去掉c3折线图的padding

Remove padding of c3 line chart

javascript

d3.js

c3.js