2

Whenever you refresh this example, the nodes are in a different order. How could you make it so the order is the same upon each refresh? Perhaps "sub node 1" at the top, then adjacent to the right is "sub node 2", etc, all the way around. Other than that, this example works for what I need to achieve.

The solutions below seem to require fixing the nodes to x,y points. But doing that seems to eliminate the drag functionality (the nodes need to be able to be dragged into different locations to change the order). Also, I don't always know how many nodes there will be initially.

https://groups.google.com/forum/#!topic/d3-js/NsHlubbv3pc

Calm down initial tick of a force layout

Configure fixed-layout static graph in d3.js

While the drag is a requirement, the animation is not. I tried seeing if stoping the animation had any effect, but it didn't.

var n = 50;

for (var i = 0; i < n; ++i) force.tick();

force.stop();

Also, tried adding a new property to the data giving each child a rank to manipulate somehow. And tried assigning id of the rank and sorting. Also tried using the index number of the array of objects. No luck. Thanks for any ideas.

Community
  • 1
  • 1
  • 1
    No. The force layout implementation is by design non-deterministic. – Lars Kotthoff Jul 07 '15 at 00:46
  • AFAIK just possible with the very simple static force layout http://bl.ocks.org/mbostock/1667139 – kwoxer Jul 07 '15 at 07:13
  • @Lars Kotthoff Thanks Lars. Based on that, I switched to a regular tree layout in a radial style. That is putting things in order. Hopefully I can figure a way to add the drag function to reposition the nodes, but that's another question. –  Jul 07 '15 at 16:44
  • 1
    @kwoxer If you refresh the page of that example, you'll get a different layout. You could modify the implementation to make it deterministic, but that is probably not trivial. – Lars Kotthoff Jul 07 '15 at 16:52
  • Ahh sure Lars, I was thinking the order is just important here. But if he wants to look it always in the same way, switch to another Layout indeed. Thanks for the point. – kwoxer Jul 07 '15 at 17:54

2 Answers2

0

Per Lars' comment, it seems this is not possible in a force layout. Switched to tree layout. JSFIDDLE Still need to add the drag piece. Will update if I can get that working.

Links to jsfiddle.net must be accompanied by code.

0

The reason it is not the same each time is d3 uses a random number to prevent nodes getting stuck in odd places. In my limited understanding the random number acts to "jiggle" the graph to help it untangle itself.

A simple solution to making it predictable is to replace the random number generator with a predictable random number generator such as that provided by seedrandom.

If you seed the random number generator with the same seed before running the simulation the results will be the same every time.

Note only a small change to the graph will cause the graph to have a completely different layout. (I always think of the butterfly chaos effect to explain why).

Jack Allan
  • 14,554
  • 11
  • 45
  • 57