为什么我的D3力布局爆炸
我正在尝试构建一个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/
问题是,当你把所有的节点放在同一个位置时,最初的排斥力将会非常强大,以至于一切都会随着你的观察而爆炸。 将所有内容初始化为随机位置会更好,所以这种效果不会发生。 在你的情况下,你可以使用w * Math.random()
和h * Math.random()
。
在这里完成演示。
链接地址: http://www.djcxy.com/p/65405.html