ProcessingJS 处理大数据的性能

Question

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

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

我目前的原型使用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

这是我的建议：

当您的用户聚焦/放大时，缩放级别分组和分解数据

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

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

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

视口限制

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

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

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

对于位图缓存，请参阅 link，（这是 Fabric.js - 一个画布库和 SVG，但概念/想法是相同的） 以及 this answer 我发布到其中之一我对交互式矢量/位图缓存的问题

---

附注：

你真的需要使用 Processing 吗？

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

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