Javascript 使用多个节点和链接加速d3 force布局

Javascript 使用多个节点和链接加速d3 force布局,javascript,graph,d3.js,force-layout,Javascript,Graph,D3.js,Force Layout,我想制作一个包含大量D3Force布局节点(超过500个节点)的可视化。虽然它可以在多达200个节点上正常工作,但在大约500个节点上,它的速度非常慢,从某种意义上说,布局从一个帧到下一个帧打嗝,节点上的鼠标悬停等事件远远没有响应。这让我问了几个问题 节点数量是否存在某种限制,在此限制之后不建议使用force布局?如果是这样的话,有没有其他图书馆可以处理这项工作 如果我想加快d3的进程,应该优化哪些部分?我试图尽量减少css/属性标记的使用(只为节点提供半径和填充颜色+为链接提供笔划宽度和笔划

我想制作一个包含大量D3Force布局节点(超过500个节点)的可视化。虽然它可以在多达200个节点上正常工作,但在大约500个节点上,它的速度非常慢,从某种意义上说,布局从一个帧到下一个帧打嗝,节点上的鼠标悬停等事件远远没有响应。这让我问了几个问题

  • 节点数量是否存在某种限制,在此限制之后不建议使用force布局?如果是这样的话,有没有其他图书馆可以处理这项工作

  • 如果我想加快d3的进程,应该优化哪些部分?我试图尽量减少css/属性标记的使用(只为节点提供半径和填充颜色+为链接提供笔划宽度和笔划颜色),并减少交互(鼠标悬停事件)的使用,但是否可以对保存所有信息的force对象进行更多优化?数据的大小必须起到一定的作用


谢谢你的意见

这样做的一种方法是,不是处理每一个
勾选事件,而是只处理其中的一小部分,例如跳过指定的数量或根据其他考虑动态调整事件的数量


如果希望平滑移动,请在已处理的
勾选事件中设置的位置之间添加过渡。当然,您也可以将这些想法结合起来,在转换运行时跳过事件,在转换完成后处理第一个事件。

您可以尝试处理不是每个
勾选
事件,而是只处理每一个,比如说,第十个事件。对于计算机来说,它确实看起来更轻(即它不像以前那样通风!)而且渲染速度更快。现在如果你想要一个流畅的布局,那就不是最好的选择。你知道如何实现吗?简单地使用转换,而不是仅仅设置新的位置。请注意,这会带来性能损失。这是解决问题的好方法!它速度较慢,但不稳定,因此现在需要权衡:快速和hiccup-y渲染或慢速和不稳定。您甚至可以动态调整跳过事件的数量,即在发生更多事件时开始时减少,在布局稳定时增加。