Question

我正在使用c3.js来绘制一些时间序列数据，并且在没有必要循环的情况下，由于某种原因，它会在整个地方进行循环。

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

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

我知道这是因为拟合算法，但我不知道如何解决它。除了设置数据和样条曲线之外，我没有使用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轴上非常接近的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}并且默认为1.0（对于X轴上的关闭点，您需要接近0.7的高值）。请参阅this fiddle，使用1.0，了解曲线如何变化。

不幸的是，这似乎没有在.tension(0.3)中公开。这可能是向他们的GitHub提出建议的有效问题。但这并不容易，因为如果你的数据在X轴上有不同的步骤（比如示例），你需要一个非常数c3，据我所知，只能用一个实现d3中的自定义插值函数（更不可能在c3中公开）。

c3.js样条时间序列图向后

1 个答案: