1

我刚才正在重写我的代码，感觉慢了很多。以前它几乎是即时的，现在我的动画需要 4 秒才能对鼠标悬停做出反应。

我尝试删除过渡并且没有更改不透明度，但它仍然很慢。

虽然它更具可读性。- -;

我唯一做的就是将大型函数拆分为更小的更合乎逻辑的函数，并重新排序分组并使用新的选择。什么会导致如此巨大的速度差异？我的数据集也不大……16kb。

编辑：我还拆分了我庞大的整体链。

edit2：我对我的代码做了一些修改，似乎切换到 nodeGroup.append("path") 导致它比 svg.append("path") 慢得多。不过，关于这一点的不雅点是，当整个组已经转换时，我必须在使用 svg 时将绘制的路径转换到中间。任何人都可以发表一些见解和 group.append vs svg.append 吗？

编辑3：此外，我在重绘之前使用 opacity:0 隐藏我的所有路径线，这导致它变得越来越慢，因为这些线从未被删除。切换到 remove();

4

1 回答 1

1

没有数据就很难使用或提出解决方案。您不需要共享私有数据，但它有助于生成一些具有相同结构的假数据。如果我们看不到您尝试制作/交互的 dom 元素数量，也不清楚您的性能影响来自哪里。

至于突出的明显事物，您并没有以数据驱动的方式来绘制细分。任何时候你看到一个 for 循环都暗示你没有使用 d3 的选择。

您应该将 listEdges 绑定到您的路径并从选择中绘制它们，可以将它们从那里转换到中心。此外，当您可以执行 nodeGroup.select 时，您不应该执行 d3.select，这样您在搜索圈子时无需遍历整个页面。

于 2013-06-21T05:39:18.257 回答