如何去除c3js折线图中的轴线溢出答案

【问题标题】：How to remove axis line overflow in c3js line graph如何去除c3js折线图中的轴线溢出
【发布时间】：2015-07-31 21:08:52
【问题描述】：

如果你看一下那些红色圆圈区域，你可以看到左下角的轴溢出，并且在 Y 轴的顶部和 X 轴的末端都有轴刻度。

我为轴和 c3 图表配置提供的唯一自定义 CSS：

.tick line {
  display: none;
}

var rateConfig = {
  bindto: '#line-chart',
  data: {
    x: 'date',
    xFormat: '%m%d',
    columns: [],
  },
  legend: {
    show: false,
  },
  point: {
    r: 4,
  },
  axis: {
    y: {
      tick: {
        format: function (d) { return d + '%'; },
        count: 5,
      },
      max: 100,
      padding: {
        top: 0,
        bottom: 0,
      },
    },
    x: {
      type: 'timeseries',
      tick: {
        culling: false,
      },
    },
  },
  color: {
    pattern: [colors['Rate1'], colors['Rate2'], colors['Rate3']],
  },
  grid: {
    y: {
      lines: [
        {value: 25},
        {value: 50},
        {value: 75},
        {value: 100},
      ],
    },
  },

【问题讨论】：

不确定你所说的“溢出”是什么意思——你是指轴末端的刻度吗？这些在 D3 中是硬编码的，没有简单的方法可以删除它们。
@LarsKotthoff 您会看到 x 轴如何变得有点负（如在 y 轴的左侧），而 y 轴如何变得有点负（如在 x 轴下方），这就是我所说的溢出的意思。
是的，这些是坐标轴末端的刻度。

标签： javascript d3.js data-visualization c3

【解决方案1】：

看看这个：

http://c3js.org/reference.html#axis-x-tick-outer

您只需要像这样更改对 rateConfig 的调用：

....
axis: {
    y: {
        tick: {
            format: function (d) { return d + '%'; },
            count: 5,
            outer: false
        },
        max: 100,
        padding: {
            top: 0,
            bottom: 0
        }
    },
    x: {
        type: 'timeseries',
        tick: {
            culling: false,
            outer: false
        }
    }
},
....

注意在 x 和 y 刻度上添加了 outer: false。

【讨论】：