javascript - 在 D3 中添加大量文本元素会导致性能问题

Question

我正在开发一个使用大量文本的 D3 应用程序。由于有很多文本元素，使用 D3 缩放进行平移会导致一些滞后。有没有一种方法可以提高我的应用程序的性能？我很高兴听到任何建议，你们可能有。我一直在考虑对我的数据进行分页并检测平移事件，但我的 UI 非常复杂，用户可以自由地按照自己想要的方式放置东西，所以我不确定如何实施平移/分页解决方案。

标签： javascriptd3.js

Answer 1

这样一个开放的问题肯定会得到非常基于意见的答案，如果没有更多的上下文，你也一定会得到一些无用的答案，但是你去吧：这取决于你想要什么以及你所说的“大量”是什么意思.

1. 假设大量元素 > 1000 个，请考虑使用画布而不是 SVG。当然，如果您可以单击单个文本节点，那就更麻烦了，但它应该非常擅长平移/缩放。
2. 如果这不可能，请查看您的代码。您是否单独重新定位所有文本节点？如果是这样，请将它们全部放在一个g节点内并给该节点一个transform和zoom。换句话说，使该节点负责所有全局移动，并且仅将文本节点相对于彼此放置。
3. 如果这也不可能，请考虑删除超出 SVG 范围的文本节点。重新定位不可见的节点需要大量的计算能力，要聪明一点。这可能是最复杂的解决方案，所以最后尝试一下。