D3-动态更新折线图

Posted 2023-02-25

技术标签:

【中文标题】D3-动态更新折线图【英文标题】：D3-Updating line chart dynamically 【发布时间】：2017-06-23 21:06:01 【问题描述】：

我是 d3 的新手，正在根据间隔动态更新折线图，我希望旧数据移出/退出并用新数据更新，我被困在一个可以看到新数据加入的位置图表，但旧数据没有移出/退出。有人可以帮我解决这个问题吗，非常感谢任何帮助。

从d3noob'slink 复制，向图表注入数据变化不大

Plunkerlink

我也在尝试为每个点添加圆圈，目前由于某种原因，单个圆圈被添加到 Y 轴的顶部。

【问题讨论】：

【参考方案1】：

在检查d3noob's link 时，我意识到他使用了两个数据集，分别是data.csv 和data-alt.csv。在updateData 函数的第二次运行期间，它总是得到data-alt.csv

所以，为了回答你的问题，

首先，您需要正确处理数据生成逻辑。由于您正在生成随机数，因此您需要确保您的 randomPoints() 函数生成 D3 可以理解的正确日期

然后将随机生成的数据集绑定到您的data 变量。

最后，在每次运行 updateData 函数时清除 data 变量。

我为你做了一个Plunker。如果您需要更多解释，请告诉我。

希望这会有所帮助:)

【讨论】：

以上是关于D3-动态更新折线图的主要内容，如果未能解决你的问题，请参考以下文章