SVG-Time-Series是一款专为展示和分析时间序列数据而设计的JavaScript库。它利用SVG技术提供灵活、可交互的时间序列图表解决方案,适用于各种Web应用的数据可视化需求。
基于D3.js的SVG时间序列图可以实现60 FPS的效果。与其它基于画布或SVG的图表相比,在平移和缩放操作上速度更快。
例如:1个网格,2条数据系列共1070点;5个网格,每组包含10条数据系列各含1070点的数据集在台式机、最新的iPhone以及顶级Android手机上的表现均能达到60 FPS。另一个演示显示,在台式机上可以达到60 FPS,在较新的iPhone设备上大约为24 FPS,而在老旧的LG D90手机上则约为3 FPS。
相比之下,其他库几乎无法实现60 fps的表现效果。在尝试使用shift键平移这些库提供的示例时会发现这一点(注:这里指代的是原文中提到的操作演示)。
值得注意的是,在上述演示中使用的数据集是相同的纽约与旧金山的温度对比数据。尽管D3.js可能看起来运行较慢,但实际上SVG栅格化并非瓶颈所在。在该特定案例里,只需解决两个问题即可达到60 fps:避免在平移和缩放过程中对网格中的SVG线进行额外属性设置(部分解决方案已经在d3轴库的最新版本中实现),以及使用绘制`d3.timeout()`而不是直接应用`d3.zoom()`来优化性能。