带有交叉过滤器的 D3 变得非常缓慢的大型数据集

Question

我有一个类似于交叉过滤器示例的可视化，除了交叉过滤器选择动态更新时间线。该代码适用于大约 100 个元素。我用接近 5000 个元素测试了代码，当应用/更改画笔以过滤尺寸时，它变得非常慢。我想知道性能问题在哪里以及如何解决它。大约 5000 个 svg 矩形的时间线渲染得很好。在应用和调整画笔大小时，交叉过滤器直方图非常缓慢（不是创建直方图，而是在调整大小和应用画笔时）。我什至在画笔更改后禁用了更新时间线，这对性能没有帮助。我正在使用类似于交叉过滤器示例中的 svg 路径方法生成交叉过滤器直方图。我不确定为什么绘制画笔需要这么长时间。

可能与交叉过滤器有关吗？关于数据的说明：虽然交叉过滤器中只有几千个数据元素，但元素非常大（包含大约一百个左右的属性）。不确定这是否会导致问题。

谢谢 一个

Answer 1

通常，您所描述的性能问题是由浏览器渲染生成的 SVG 引起的，而不是由 Javascript 中数据的实际处理引起的。您可以尝试的一件事是使用 HTML 画布而不是 SVG。请注意，转换您的代码以执行此操作并非易事。