【问题标题】:Speed up d3 force layout with many nodes and links使用许多节点和链接加速 d3 力布局
【发布时间】:2013-08-21 03:11:20
【问题描述】:

我想生成一个包含大量具有 d3 强制布局的节点(超过 50 万个节点)的可视化。虽然它可以在多达 20000 个节点上正常工作,但它在大约 500 个节点时会变得非常慢,因为从一帧到下一帧的布局打嗝以及节点上的鼠标悬停等事件远没有响应。这让我问了几个问题。

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

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

感谢您的意见!

【问题讨论】:

  • 您可以尝试不处理每个tick 事件,而只处理每个事件,例如 10 日。
  • 它对计算机来说似乎更轻(即它不像以前那样通风!)并且渲染速度更快。现在,如果您想要一个流畅的布局,那将不是要走的路。您知道如何实现吗?
  • 只需使用过渡而不是仅仅设置新位置。请注意,这会带来性能损失。
  • 这是解决问题的好方法!它速度较慢但流畅,因此现在需要权衡:快速且不流畅的渲染或缓慢且流畅的渲染。
  • 您甚至可以动态调整跳过事件的数量,即当更多事件发生时开始减少,随着布局稳定下来更多。

标签: javascript graph d3.js force-layout


【解决方案1】:

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

如果您想要平滑移动,请在处理的tick 事件中设置的位置之间添加过渡。当然,您也可以结合这些想法并在过渡运行时跳过事件,在完成后处理第一个事件。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-03-22
    • 2014-11-20
    • 2014-06-23
    • 2017-03-17
    • 2018-10-10
    • 2015-08-12
    • 1970-01-01
    相关资源
    最近更新 更多