Javascript 带有交叉过滤器的D3成为非常慢的大型数据集

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

这可能与交叉过滤器有关吗？关于数据的注意事项：虽然交叉过滤器中只有几千个数据元素，但这些元素非常大（包含大约一百个属性）。不确定这是否是问题的原因

谢谢

---

一个

通常，您描述的性能问题将由浏览器呈现生成的SVG而不是Javascript中数据的实际处理引起。您可以尝试使用HTML画布而不是SVG。但是，请注意，转换代码并不是一个简单的过程。

您使用的是哪种浏览器/操作系统？谢谢。我只是尝试了我的代码，没有呈现5000元素的时间线，性能问题就消失了。您有什么建议转换为画布的技巧或资源吗？它需要完整的代码重写吗？这里有一个d3的例子。它不需要完全重写，但可能会有相当大的变化。我同意Lars的观点，如果你需要渲染数千个元素，canvas确实可以帮上忙。但是，根据可视化的细节，可能有一种方法可以引导用户在呈现时间线之前进一步过滤数据集，也许是一个更窄的时间窗口？或者某种形式的聚合？在我之前构建的d3时间轴上，这种策略对我来说效果很好，在一个更大的几十万个元素数据集中，在任何给定的时间只有大约一百个元素被渲染。