D3：最昂贵的操作是什么？

Question

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

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

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

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

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

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

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

Answer 1

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

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

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