D3强制布局开始需要5秒钟才能执行

Question

我在我的项目中使用了d3，并在其中使用了强制布局。

执行d3 force.start()函数后，需要5秒钟才能在浏览器中进行布局和显示内容。

This示例仅使用2个节点的强制布局。很简单，对吧？但是加载这些节点需要很长时间。

问题：这种布局是正常的还是有一些错误的气味？

Answer 1

我认为你只是误解了这个例子。加载节点不需要5秒钟。布局冷却需要5秒钟（稳定）。

最初，节点随机定位并发出事件start。然后，力布局进入一个循环，重新计算节点位置并冷却布局（逐渐减少alpha值）。对于每个循环通道，都会发射一个tick事件。最后，布局稳定后（alpha足够接近于零），发出事件end。

例子中的代码显示的节点时，才发出end事件：

// We're about to tell the force layout to start its 
// calculations. We do, however, want to know when those 
// calculations are complete, so before we kick things off 
// we'll define a function that we want the layout to call 
// once the calculations are done. 

force.on('end', function() { ... 

您可以将其更改为tick，为this modified example，查看节点瞬间呈现。但节点将会弹跳，直到布局稳定。

您可以在Force Layout documentation中阅读更多关于力布局的内容。这里有关于force.on的信息。