目前我正在尝试创建一个包含数千个节点和约30k个链接的力导向图。正如你所猜测的那样，模拟非常缓慢。相反，我想要预先计算出所有节点的位置，并仅呈现一个静态（但交互式）图形。是否有一种方法可以使用d3.js计算力导向图而不对其进行渲染（使其更快），然后仅从预先计算的值呈现静态图形？我的代码目前基于Mike Bostock的example.。
静态D3力导向图性能优化
4
- leonsas
2
SVG通常在浏览器中的交互和动画方面是最慢的解决方案。使用Canvas（或者如果你想要3D Canvas与WebGL）进行动画可能会提高一些性能。但你需要自己编写代码（或使用库）来实现对象的选择和拖拽。 - Louis Ricci
这正是我不想做的事情。我并不需要完整模拟我的图形。我只需要可视化节点和链接以及它们形成的集群，所以我选择了力导向图。另外，我也不需要能够拖动节点，我只需要能够将鼠标悬停在每个节点上并查看一些信息。所以我在所有我不需要的东西上付出了高性能代价，我确信有一种方法可以去除它们，但我不确定该如何去做。 - leonsas
1个回答
3
d3使用的力导向图布局方法是标准的斥力和引力模型，您可以在维基百科上查找伪代码(http://en.wikipedia.org/wiki/Force-based_algorithms_%28graph_drawing%29#Pseudocode)，或者查看d3源代码本身(https://github.com/mbostock/d3/blob/master/src/layout/force.js)。该算法每个刻度(或时间片段)的复杂度为O(n^2)，达到平衡需要约n个刻度，因此整个布局过程的复杂度为O(n^3)(http://www.ecs.umass.edu/ece/labs/vlsicad/ece665/presentations/Force-Directed-Adel.ppt)。对于成千上万个节点来说，这是不实际的。
为了尝试回答您的具体问题，只需使用CSS，在SVG容器元素上显示:none。一旦初始仿真“最终”完成，您就可以获取SVG元素的HTML源代码，并将其用作静态但交互式表示的基础。(一旦您拥有所有元素的HTML，您只需要将鼠标悬停事件添加到它们上面以显示它们的详细信息即可。
为了尝试回答您的具体问题，只需使用CSS，在SVG容器元素上显示:none。一旦初始仿真“最终”完成，您就可以获取SVG元素的HTML源代码，并将其用作静态但交互式表示的基础。(一旦您拥有所有元素的HTML，您只需要将鼠标悬停事件添加到它们上面以显示它们的详细信息即可。
- Louis Ricci
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接