svg - ProcessingJS 性能与大数据

Question

我的目标是为来自运动跟踪实验的数据创建交互式网络可视化。

移动物体的轨迹被渲染为由线连接的点。可视化允许用户平移和缩放数据。

我目前的原型(prototype)使用 Processing.js，因为我熟悉 Processing，但在绘制超过 10,000 个顶点或线的数据时，我遇到了性能问题。我采用了几种实现平移和缩放的策略，但我认为目前最好的实现是将数据保存为 svg 图像并使用 Processing.js 中的 PShape 数据类型来加载、绘制、缩放并翻译数据。代码的清理版本:

/* @pjs preload="nanoparticle_trajs.svg"; */
PShape trajs;

void setup() 
{
  size(900, 600);

  trajs = loadShape("nanoparticle_trajs.svg");

}

//function that repeats and draws elements to the canvas
void draw() 
{

  shape(trajs,centerX,centerY,imgW,imgH);

}

//...additional functions that get mouse events

也许我不应该期待这么多数据点的快速性能，但是是否有使用 Processing.js 优化复杂 svg 元素显示的通用策略？如果要显示100,000个顶点和线，我该怎么办？我应该一起放弃处理吗？

谢谢

编辑:

阅读以下答案后，我认为图像可以帮助传达可视化的本质:

它本质上是一个具有 >10,000 个点和连接线的散点图。用户可以平移和缩放数据，左上角的比例尺会根据当前缩放级别动态更新。

Answer 1

这是我的推介:

随着用户关注/放大，缩放级别分组和分解数据

我建议您将一些数据组合在一起并将其呈现为简单节点

在放大到特定节点时，您可以分解节点并释放组，从而显示其详细信息。

通过这种方式，您可以限制需要在缩小 View (其中将显示所有节点)上显示的数据量，并在用户放大到某个区域时添加详细信息 - 在这种情况下，并非所有节点都会因为放大只关注图表的一个区域而显示

视口(viewport)限制

检测当前 View 区域中的内容并绘制它。如果您的用户在他的视口(viewport)中看不到它，请避免绘制整个节点图结构 - 仅显示必要的内容。尽管我怀疑这已经由 Processing.js 完成，但我不知道您的缩放功能是否利用了这一点。

如果您的节点是交互式/可点击的，请考虑位图缓存

如果您的元素是可点击/交互的，您可能需要考虑对数据进行分组并将它们显示为位图(大组数据显示为单个图像)，直到用户单击位图，在这种情况下位图被删除并且原始形状在该位图位置重新绘制。这最大限度地减少了引擎在每个重绘周期中必须绘制的点/线的数量。

对于位图缓存，请参阅此 link ,(这是 Fabric.js - Canvas 库和 SVG，但概念/想法是相同的) 还有 this answer我发布了一个关于交互式矢量/位图缓存的问题

---

作为旁注:

你真的需要使用 Processing 吗？

如果没有交互或动画发生，而您只想在 Canvas 上 blit 像素(只绘制一次)，请考虑完全放弃基于矢量的库。普通的旧 Canvas 只是在 Canvas 上传输像素，仅此而已。数据的初始启动绘图可能会有一些延迟，但由于在绘制点/形状/线之后没有任何内部引用 - 没有什么会占用您的资源/阻塞您的内存。

因此，如果是这种情况 - 考虑切换到纯 Canvas。然而，数据可视化都是关于动画和交互性的，所以我怀疑你会想要放弃它们。