c3.js 样条时间序列图倒退答案

【问题标题】：c3.js spline time series chart going backwardsc3.js 样条时间序列图倒退
【发布时间】：2017-06-14 20:11:35
【问题描述】：

我正在使用 c3.js 绘制一些时间序列数据，并且当不需要循环时，由于某种原因，这些图会在整个地方进行循环。

这是我正在绘制的所有 5 个图的视图

仔细观察其中一个，我们可以看到它向后循环，即使没有向后的点。

我知道这是因为拟合算法，但我不知道如何解决它。除了设置数据和样条线之外，我没有为 c3 使用任何其他配置。

要重现问题并亲自查看，您可以尝试this page，并将sn-p替换为以下内容：

var chart = c3.generate({
    data: {
        columns: [
            ['X', 1, 2, 3.9, 4, 5, 6],
            ['data1', 30, 200, 100, 400, 15, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        x: 'X',
        type: 'spline'
    }
});

【问题讨论】：

我想我们需要看到minimal reproducible example
我在帖子中说我使用的是基本情节，没有额外的配置。所以这是我的代码：c3js.org/samples/chart_spline.html
好的，如果 Joe Random Helper 访问该链接，他需要在 sn-p 中做什么才能看到您看到的内容？
从第一张图中可以看出，曲线拟合算法发生了多个循环。第二张图片显示了来自一个特定绘图的 3 个点，它不会向后退，但是，绘图拟合算法正在循环中向后退。我不是要求某人修复我的代码，我要求的是知道这个特定曲线拟合算法如何工作以及为什么它会向后循环以及我需要使用 c3（或 d3）中的什么算法的人所以它是通过所有点的平滑曲线，而不是向后循环。
我想说的是，如果你能举出一个具体的例子，你会得到更好的帮助。没有这个，问题就太模糊了，可能会被标记为这样。请阅读How to Ask和editing

标签： javascript d3.js curve-fitting c3.js spline

【解决方案1】：

我发现这个问题很有趣，所以昨天我在问题中添加了一个具体示例，它重现了 X 轴上 2 个连续点非常接近的问题，这会触发 c3 生成“向后”的样条线。

样条插值被委托给d3，默认为cardinal类型，但可以在c3中改变，如下所示：

var chart = c3.generate({
    data: {
        columns: [
            ['X', 1, 2, 3.9, 4, 5, 6],
            ['dataA', 30, 200, 100, 401, 15, 250],
            ['dataB', 130, 100, 140, 200, 150, 50]
        ],
        x: 'X',
        type: 'spline'
    },
    spline: {
        interpolation: {
            type: 'basis'
        }
    }
});

请参阅this page 了解其他选项：'linear', 'linear-closed', 'basis', 'basis-open', 'basis-closed', 'bundle', 'cardinal', 'cardinal-open', 'cardinal-closed', 'monotone'。

使用d3，为了获得在X轴上单调的样条，您需要使用tension参数，它可以从0.0到1.0，默认为0.7（对于 X 轴上的闭合点，您需要接近 1.0 的高值）。看this fiddle，玩.tension(0.3)，看看曲线如何变化。

不幸的是，c3 中似乎没有公开。这可能是向他们的 GitHub 建议的有效问题。但这不会那么容易，因为如果您的数据在 X 轴上有不同的步骤（如示例），您需要一个非常量的 tension，据我所知，这只能通过自定义插值来实现d3 中的函数（更不可能在 c3 中公开）。

【讨论】：