如何动态更改 X 轴和 Y 轴的起点？

【问题标题】：How do I dynamically change where the X and Y axes start?如何动态更改 X 轴和 Y 轴的起点？
【发布时间】：2018-08-02 19:17:36
【问题描述】：

我有一个这样设置的 c3 折线图。

var chart = c3.generate({
    bindto: "#chart",
    data: {
        url: dataFile,
        x: "year"
    }
});

dataFile 是一个 CSV 文件，看起来像这样。

year, data1
1990, 10
1992, 20,
1993, 30

等等……

在不更改数据源的情况下，如何使 X 轴从 1992 年（或我选择的任何其他年份）开始，而 Y 轴从 1992 年的 data1 值开始——在本例中为 20？

【问题讨论】：

您是否要排除“1990, 10”行显示？（试图理解并制定我的答案）

标签： javascript d3.js c3.js

【解决方案1】：

您可以使用轴配置设置轴的范围 --> https://c3js.org/reference.html#axis-x-max

不过根据数据的内容来更新就有点麻烦了，不过这样就行了 -->

http://jsfiddle.net/jaw2rdes/3/

具体来说，在oninit配置函数中我们可以访问数据并使用它来设置我们想要的轴分钟

oninit: function () {
  setTimeout(function () {
      var xval = 1991;
      var matchSeries = 'data1';
      var index = (chart.x()[matchSeries].indexOf(xval));
      if (index >= 0) {
         var yval = chart.data.values(matchSeries)[index];
         chart.axis.min({
              x: xval,
              y: yval,
          });
        }
   }, 0);
}

但是，请记住这一点 a) 在开始时产生动画（虽然可以关闭） b) 不会删除任何数据点，它们只是隐藏在显示轴的左侧/底部

【讨论】：