为什么我的d3力量布局会爆炸

时间:2014-08-26 20:10:53

标签: javascript svg d3.js force-layout

我正在尝试构建一个d3力布局,而且它大部分都在工作,但动画的前一秒左右是有点古怪的。我启动窗口中间的所有节点,它们或多或少地在我想要它们的位置结束,但是他们做的第一件事就是在安静下来之前爆炸到窗口边缘或更远处。布局最终会或多或少地达到我想要的水平,但是我无法在当前状态下向客户端显示它,因为它最初是多么古怪。

我尝试过使用重力,电荷,链接距离和摩擦值来烦躁不安,但似乎我只能通过改变条件来摆脱这种行为,这样如果我喜欢最终结果,路径有古怪的。如果路径不是很古怪,那么最终结果就不好了。

   force = d3.layout.force()
    .nodes(data.nodes)
    .links(data.edges)
    .size([w, h])
    .charge( -500 )
    .gravity( 1 )
    .linkDistance([50])
    .friction(.9);

这是我的部队宣言的最新修订版。所以我的问题是我是否在动画开始时无意中鼓励这种爆炸性的东西,或者这只是它的工作方式,并且每个人都同意在开始时没有注意到这个小小的打击。

这里是一个JSFiddle:http://jsfiddle.net/tsgouros/a5u62udv/,这里也是一样,放慢了速度,让你可以在开始时看到混乱:http://jsfiddle.net/tsgouros/a5u62udv/1/

1 个答案:

答案 0 :(得分:2)

问题在于,当你将所有节点放在同一个位置时,最初的排斥力会如此强烈,以至于你所观察到的一切都会爆炸。最好将所有内容初始化为随机位置,这样就不会发生这种影响。在您的情况下,您可以使用w * Math.random()h * Math.random()

完整演示here