删除 c3 折线图的填充答案

【问题标题】：Remove padding of c3 line chart删除 c3 折线图的填充
【发布时间】：2016-12-08 20:42:23
【问题描述】：

我有一个带有类别 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 处。我尝试了 Stackoverflow 的视图答案，但它没有用。填充设置为 0。如果我将其设置为任何正值，它只会缩小更多范围。提前致谢。

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案1】：

-0.5 或稍小的负填充 (-0.49) 将消除这些差距。

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

padding: -0.5 - (0.01 * no_of_datapoints)

【讨论】：