加快d3强制布局与许多节点和链接 [英] Speed up d3 force layout with many nodes and links

问题描述

我想生成一个可视化，其中包含了大量的节点和d3力布局（超过500个节点）。虽然它正常工作正常与200多个节点，它变得非常慢，大约500，在一个意义上，布局从一个帧到下一个帧，事件像鼠标悬停在节点上远没有响应。这使我提出几个问题。

• 节点数是否有某种限制，使用force布局？




• 如果我想用d3加快这个过程，哪些零件应该优化？我试图保持使用css /属性标记最小（刚刚给一个半径和填充颜色的节点+笔触宽度和笔触颜色链接），并减少交互（鼠标悬停事件）的使用，但可以有任何更多的优化到持有所有信息的力对象？数据大小必须起到一定的作用...

感谢您的投入！

这样做的一种方法是不是处理每个事件， c>事件，但只有一个它们的分数，例如跳过指定的数字或根据其他考虑动态调整事件数量。

如果你想平滑移动，添加一个过渡在处理的 tick 事件。您当然可以结合这些想法，在过渡期间跳过事件，在完成后处理第一个。

I wanted to produce a visualization that contains a good deal of nodes with the d3 force layout (more than 500 hundred nodes). While it is working correctly with as much as 200 hundred nodes it gets very slow with about 500, in the sense that the layout hiccups from one frame to the next and events like mouseover on nodes are far from being responsive. This made me ask several questions.

• Is there some kind of limit in the number of nodes after which it is not recommended to use the force layout ? If so, is there any other library that could handle the job ?

• If I wanted to speed up the process with d3, which parts should be optimized ? I tried keeping the use of css/attributes markup minimal (just gave a radius and a fill color to nodes + stroke-width and stroke color to links) and reduce the use of interaction (mouseover events) but could there be any more optimization done to the force object which holds all of the information ? The size of data must play a certain role...

Thank you for your input !

解决方案

One way of doing this would be to handle not every tick event, but only a fraction of them, e.g. skipping a specified number or dynamically adapting the number of events depending on other considerations.

If you want smooth movements, add a transition between the positions set in the handled tick events. You can of course combine these ideas as well and skip events while the transition is running, handling the first one after it has been completed.

这篇关于加快d3强制布局与许多节点和链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！