4

I use d3.js exactly as shown here but with different data value.

enter image description here

When the graph is first shown all elements are scattered and for around a second rapidly move towards their position. This looks nice in the sample, but for my data it does not look so nice. Any way to turn it off so that nodes start in their designated place? Any way to customize this entry visualization?

VividD
  • 10,456
  • 6
  • 64
  • 111
Yaron Naveh
  • 23,560
  • 32
  • 103
  • 158
  • I think what you are looking may have been answered here: http://stackoverflow.com/questions/13463053/calm-down-initial-tick-of-a-force-layout/13495632#13495632 – Superboggly Nov 29 '12 at 23:00

1 Answers1

0

You can loop through the nodes array and set the .x/.y and .px/.py values to an initial position that you want the nodes in, and by doing so will limit the amount they need to move in their initial layout. If you turn off the force-directed algorithm (the tick() function) then you can apply standard .transtion().duration(500).attr("transform", xx) behavior to the nodes and links to make them animate in a manner you prefer before or after running the force-directed algorithm, but make sure you set the .x/.y and .px/.py attributes to their final position, otherwise they will be reset as soon as you .tick()

Elijah
  • 4,609
  • 3
  • 28
  • 36