why does my d3 force layout explode

I am trying to construct a d3 force layout, and it's mostly working, but the first second or so of the animation is kind of wacky. I start all the nodes in the middle of the window, and they end up more or less where I want them to, but the first thing they do is blast out to the edges of the window or beyond before settling down. The layout is eventually doing more or less what I want it to, but I can't really show it to the client in the current state because of how wacky it is right at first.

I've tried fidgeting a lot with the gravity, charge, linkDistance, and friction values, but it seems like I can only get rid of this behavior by changing conditions so that if I like the final result, the path there is wacky. If the path there isn't wacky, the final result is no good.

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

This is the latest revision of my force declaration. So my question is whether I'm doing something inadvertent to encourage this explosive thing at the start of the animation, or if this is just the way it works and everyone agrees not to notice that little burp at the beginning.

Here's a JSFiddle: http://jsfiddle.net/tsgouros/a5u62udv/ and here's the same thing, slowed down so you can see the chaos at the start: http://jsfiddle.net/tsgouros/a5u62udv/1/

---

The problem is that when you place all nodes at the same position, the initial repulsive forces will be so strong that everything blasts away as you've observed. It's better to initialise everything to a random position so this effect won't occur. In your case, you can use w * Math.random() and h * Math.random() .

Complete demo here.

链接地址: http://www.djcxy.com/p/65406.html

上一篇: Java实现一个工作FPS系统

下一篇: 为什么我的D3力布局爆炸