静态D3力导向图表现

时间:2012-12-26 20:54:02

标签: javascript performance d3.js force-layout

所以目前我正在尝试在图中创建一个数千个节点和大约30k链接的力导向图。你可能猜到,模拟非常慢。我想做的是预先计算节点的所有位置,然后渲染一个静态(但交互式)的图形。有没有办法使用d3.js来计算力导向图而不渲染它(使其更快)然后只是从预先计算的值渲染静态图?我的代码目前基于Mike Bostock的example.

1 个答案:

答案 0 :(得分:2)

方法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)。对于数千个节点而言,这是不切实际的。


要尝试回答您的具体问题,只需在SVG容器元素上使用CSS,display:none即可。初始模拟“最终”完成后,您可以获取SVG元素的HTML源代码,并将其用作静态但交互式表示的基础。 (一旦你拥有了所有元素的html,你就必须将鼠标悬停事件添加到它们上面,让它们显示它们的细节。