Questions about ForceDirected Layout

[Claudia Bohringer]

Hi 

can you please explain me the effect of each of the parameters:

    var graphLayout = new joint.layout.ForceDirected({

    graph: graph,

    width: 600, height: 600,

    gravityCenter: { x: 300, y: 300 },

    charge: 180,

    linkDistance: 80,

      linkStrength: 0.1

});

Just a short explanation for all the parameters like charge, linkDistance etc.

Are there more parameters that are not visible in the example above?

Also how can I avoid elemnts overlapping?

When I animate the forcedirected layout everything pulls together in the center and then the animation stops. 

In your example the animation continues - what do I do wrong?

Also when I add elements throught the halo before animation these elements don't get animated? What do I have to change here?

Is there a way to keep elements that are closer in the hierarchy closer together?

Thanks!

[Claudia Bohringer]

Just to explain: I generate a hierarchical flowchart-style graph dynamically with php - thats why i need it layouted automatically, I never know how many elements there will be, so manual placement with fixed coordinates would be impractical.

[dave]

Hi Claudia,

The force directed layout plugin auto-layouts graphs based on three forces: repulsive force (forces nodes to move out of each other), attractive force (tries to get nodes together like a spring) and a gravity force (tendency of the nodes to move to a certain point).

The gravityCenter parameter is the point the nodes tend to move to. This is usually set to the center of the area where the nodes are to be layouted.

charge parameter affects the repulsive force. Bigger the parameter is, bigger the repulsive force.

linkDistance and linkStrength both affect the attractive force (you can think of it as parameters of a spring that tights together two nodes). Bigger the linkStrength, bigger the attractive force between two connected nodes. On the other hand, smaller the linkDistance, shorter links you allow and so the attractive force is bigger between two connected nodes.

There is no one-fits-all set of parameters that would give great result for all possible graphs. Therefore, I suggest you to play with parameters, try to set different values so that it gives a good result for you use case.

The other related issues is hard to answer without seeing a code snippet on how you use the plugin.

However, I see that you mentioned that you want to use ForceDirected layout plugin to layout flowchart-style graphs. For this kind of graphs, you might want to take a look at the DirectedGraph plugin. This plugin is for download on our site: http://jointjs.com/download and I wrote a blog post describing the plugin here: http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html.

[JointJS Newb]

Hello,

I too am trying to use the force-directed layout.  I am trying to create a prototype like the example on this page:  http://www.jointjs.com/rappid/docs/layout/forceDirected#use  The installation instructions on the page state that, to start, I should, "Include the joint.layout.ForceDirected.js file into [my] HTML." From where do I download the joint.layout.ForceDirected.js file?  I do not see the file listed on the Joint JS download page:  http://www.jointjs.com/download

[dave]

ForceDirected layout plugin is part of the commercial Rappid toolkit: http://jointjs.com/about-rappid. This goes for all the plugins described in the http://jointjs.com/rappid/docs section.