静态D3力导向图的性能 [英] Static D3 Force-Directed Graph performance

问题描述

因此，当前我正在尝试创建一个由力图构成的成千上万个节点和该图中约3万个链接的图形.您可能会猜到，仿真非常慢.相反，我想做的是预先计算节点的所有位置，然后只渲染静态(但交互式)的图.有没有一种方法可以使用d3.js来计算力向图而不渲染(使其更快)，然后仅根据预先计算的值来渲染静态图?我的代码当前基于Mike Bostock的示例.

So currently I'm trying to create a force-directed graph of a couple thousand nodes and about 30k links in the graph. As you may guess, the simulation is very very slow. What I would like to do instead is to precompute all the positions for the nodes and just render a static (but interactive) graph. Is there a way to use d3.js to calculate a force directed graph without rendering it (making it much faster) and then just render the static graph from the pre-calculated values? My code is currently based off Mike Bostock's example.

推荐答案

d3用于力导向图布局的方法是标准的排斥力和吸引力模型，您可以在Wikipedia上找到伪代码(http://en .wikipedia.org/wiki/Force-based_algorithms_％28graph_drawing％29#Pseudocode)或查看d3源本身(https://github.com/mbostock/d3/blob/master/src/layout/force.js).

The method d3 uses for force directed graph layout is the standard repulsive force and attractive force model, you can find the pseudo code on Wikipedia (http://en.wikipedia.org/wiki/Force-based_algorithms_%28graph_drawing%29#Pseudocode) or check out the d3 source itself (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).对于数千个节点，这是不切实际的.

That algorithm has an O(n^2) complexity per tick (or time slice) and it takes about n ticks to reach an equilibrium so O(n^3) for the whole layout process (http://www.ecs.umass.edu/ece/labs/vlsicad/ece665/presentations/Force-Directed-Adel.ppt). For thousands of nodes this isn't practical.

要尝试回答您的特定问题，只需使用CSS，然后显示:在SVG容器元素上没有显示.一旦初始模拟最终"完成，您就可以获取SVG元素的HTML源，并将其用作静态但交互式表示的基础. (一旦您有了所有元素的html，只需将鼠标悬停事件添加到它们上，以使它们显示其详细信息即可.

To try and answer your specific question, just use CSS, display: none on your SVG container element. Once the initial simulation "eventually" finishes you can grab the HTML source of the SVG elements and use that as your basis for the static but interactive representation. (once you have html of all the elements you'd just have to add the mouse hover event onto them to have them display their details.

这篇关于静态D3力导向图的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！