如何在 c3js 动态图表上进行平滑（水平）过渡答案

【问题标题】：How to have smooth (horizontal) transition on a c3js dynamic chart如何在 c3js 动态图表上进行平滑（水平）过渡
【发布时间】：2016-05-16 13:53:49
【问题描述】：

我开始使用 c3js，希望得到一个好看的动态图表。在测试它时，我注意到每个load 函数之间的转换似乎在没有任何转换的情况下发生。我也尝试使用flow 函数，但得到了相同的结果。我找不到关于这个主题的任何内容，但基本上有办法改变这种行为并在新数据点出现时平稳过渡吗？

你可以在这里看到我的例子：

        transition: {
            duration: 0
        },

当我真正启用转换时，它运行良好（水平），直到我开始删除一些数据以添加新指标，然后事情就向南了。它不仅水平过渡，而且垂直过渡，这使得事情很难看（350 是默认值）：

        transition: {
            duration: 350
        },

我怎样才能只强制平滑的水平过渡？这是我的意思的示例（仅使用 D3）：

【问题讨论】：

【解决方案1】：

是的，线在移动，但点只是垂直上下摆动以适应当前值，而不是随着线移动...

flow api 可以让你做你所问的，但有一个严重的错误（请参阅我的答案），因此调整提问者自己的答案可能是平滑水平过渡的最佳选择

PS。如果您还想停止 y 轴自动调整大小，则需要在图表声明中这样做：

axis: {
        y: {
            max: 1 // translates to 100% on the y axis
        }
    }

【讨论】：

我尝试了您的建议，但在 JSFiddle 中无法解决。我还打开了您的链接并找到了一个示例，但动画仍然不流畅。我编辑了原始问题并举例说明了我的意思：bl.ocks.org/simenbrekken/6634070（使用 C3）。我想知道我是否应该现在就开始使用 D3。
是的，动画很生涩，因为 1) 它每 2 秒更新一次，但动画只有 750 毫秒，可以更改，但 2) y 轴在图形水平动画后动画，所以不能像你要求的那样做一个连续的饲料。虽然实时数据的另一个选择，但缺乏平滑样条效果，是立体主义，它是由写 d3 的同一个人 - square.github.io/cubism

【解决方案2】：

c3js 有一个专门用于此的 .flow 方法：http://c3js.org/samples/api_flow.html

请注意，如果您切换到其他选项卡并在一段时间后返回，它会开始冻结。

【讨论】：