Javascript 如何在c3js动态图表上进行平滑（水平）转换

我开始玩c3js，希望得到一个好看的动态图表。在测试时，我注意到每个

load

函数之间的转换似乎没有任何类型的转换。我还尝试使用

flow

函数，但得到了相同的结果。我找不到关于这个主题的任何东西，但基本上有没有一种方法可以改变这种行为，并在新数据点出现时实现平稳过渡

您可以在这里看到我的示例：

        transition: {
            duration: 0
        },

当我真正启用转换时，它工作得很好（水平），直到我开始删除一些数据以添加新的指标，然后事情就变得糟糕了。它不只是水平过渡，而是垂直过渡，这使得很难查看（默认值为350）：

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

---

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

看看这里的问题-->

flow api允许你做你想做的事情，但是有一个明显的错误（请看我的答案），所以调整提问者自己的答案可能是平滑水平过渡的最佳选择

另外，如果您还想停止y轴自动调整大小，则在图表声明中需要：

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

---

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

看看这里的问题-->

flow api允许你做你想做的事情，但是有一个明显的错误（请看我的答案），所以调整提问者自己的答案可能是平滑水平过渡的最佳选择

另外，如果您还想停止y轴自动调整大小，则在图表声明中需要：

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

---

c3js有一个.flow方法专门用于此：

---

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

c3js有一个.flow方法专门用于此：

---

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

我没有玩过c3.js，但玩过d3.js。看起来好像您立即更新了路径，但节点按预期进行了转换。“也许能找到一种方法来改变道路，而不是立即改变它们？”我同意这一点，但我找不到任何关于如何实现这一点的指导。我正在使用c3的更新方法，这似乎是一个用于动态数据的方法。对于d3，您将实现enter（）exit（），我将查看是否可以在c3.js上找到任何内容。我没有使用c3.js，但是使用了d3.js。看起来好像您立即更新了路径，但节点按预期进行了转换。“也许能找到一种方法来改变道路，而不是立即改变它们？”我同意这一点，但我找不到任何关于如何实现这一点的指导。我正在使用c3的更新方法，这似乎是一个用于动态数据的方法。使用d3，您将实现enter（）exit（），我将查看是否可以在c3上找到任何内容。jsI尝试了您的建议，但在JSFIDLE中无法找到它。我还打开了你的链接，找到了一个例子，但动画仍然不流畅。我编辑了原始问题，并举例说明我的意思：（使用C3）。我想知道我是否不应该现在就开始使用D3。是的，动画是不稳定的，因为1）它每2秒更新一次，但动画只有750ms，这是可以更改的，但2）在图形水平设置动画后，y轴设置了动画，所以不能像你要求的那样进行连续馈送。虽然实时数据的另一个选择，但缺少平滑样条曲线效果，是立体主义，它是由编写d3的同一个人提出的——我尝试了你的建议，但在JSFIDLE中无法理解。我还打开了你的链接，找到了一个例子，但动画仍然不流畅。我编辑了原始问题，并举例说明我的意思：（使用C3）。我想知道我是否不应该现在就开始使用D3。是的，动画是不稳定的，因为1）它每2秒更新一次，但动画只有750ms，这是可以更改的，但2）在图形水平设置动画后，y轴设置了动画，所以不能像你要求的那样进行连续馈送。虽然实时数据的另一个选择，但缺少平滑样条线效果，是立体派，它是由写d3的同一个人写的-我尝试了flow，但我无法让它看起来流畅。。停顿仍然在你身边。不确定我是否错过了什么？没有很快完成。尝试使用duration（持续时间）选项（为整个图表和flow方法提供）以接近数据更新频率。我尝试了flow，但无法使其看起来流畅。。停顿仍然在你身边。不确定我是否错过了什么？没有很快完成。尝试使用duration（持续时间）选项（在整个图表和流程方法中都显示），以接近数据更新频率。