ProcessingJS具有大数据的性能

Question

我的目标是创建运动跟踪实验数据的交互式Web可视化。

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

我当前的原型使用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我发布到我的一个交互式矢量/位图缓存问题

---

作为旁注：

您真的需要使用处理吗？

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

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