javascript - c3.js 样条时间序列图向后移动

Question

我正在使用 c3.js 绘制一些时间序列数据，并在不需要循环时出于某种原因绘制它在各处进行循环的图。

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

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

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

要重现该问题并亲自查看，您可以尝试 this page ，并将代码片段替换为以下内容:

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'
    }
});

Answer 1

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

样条插值被委托(delegate)给 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 中暴露)。