如何在不重绘的情况下将单个数据点添加到 D3 中的折线图

How to add a single data point to a line graph in D3 without redrawing

我正在努力替换在 highcharts 中实现的动态图表。当前的实现是一个线面积图,随着传入的流数据随时间扩展,因此替换需要动态可变,最好是动画。

目前我正在寻找 D3 的替代品。我发现了几个例子,这些例子表明可能存在类似的东西,例如找到的流数据图表 here,但在这个例子中,这条线在每次迭代时都会重新绘制。它并不是非常低效,因为可视化仅限于固定的 window 数据,但在我的情况下,随着数据流的进入,需要从头到尾显示大量数据。每次添加都重新绘制图表可能会导致性能快速下降。

在 D3 中,是否有一种方法可以在不需要重绘的情况下将单个线段添加到现有绘图中?

我最终放弃了 D3,因为它需要太多的开发才能使它像准备就绪的交互式图表一样美观out-of-the-box,但我确实想出了如何做我想做的事情。

我最终使用了一个允许逐步添加额外点的路径组件,而不是 re-adding 在每次迭代时都添加额外点的新行。路径必须是 re-rendered 并生成一个短的 svg 路径字符串,所以我不确定哪种方法更有效,但短路径字符串降低了结果 html 在这种情况下的复杂性那一个是向绘图添加多条线,每个线段一条线。

如果对路径的添加仅涉及使用原始字符串的连接生成新字符串,那么我想这可能比遍历每次更新时增长的系列数据数组更有效。

结果速度足够快,可以跟上流数据的速度,UI 没有任何明显的减慢,但不幸的是我需要更先进的东西。