jgraphx: hierarchical layout reduce distance between nodes

Question

I'm using jgraphx to visualize a control low inside a method. Thus, i'm using the mxHierarchicalLayout. But in the result graph the distance between two nodes is too big. (see img)

I want to reduce the yellow marked areas.

Im adding nodes with:

Object v1 = graph.insertVertex(parent, u.toString(), u.toString(), 0, 0, 0, 0);

to set them all to the same spot. Afterwards im using the mxHierarchicalLayout:

// define layout
mxIGraphLayout layout = new mxHierarchicalLayout(graph);
// layout graph
layout.execute(graph.getDefaultParent());

is there a way to compress the graph ui?

Answer 1

There are two parameters to define spacing between nodes on a hierarchical layout:

• intraCellSpacing for horizontal spacing
• interRankCellSpacing for vertical spacing (space between ranks,layers,hierarchy)

So, you are looking for the second one.

A compact example:

var layout = new mxHierarchicalLayout(graph);
layout.edgeStyle=2;
layout.intraCellSpacing=20;
layout.interRankCellSpacing=40;

Compact mxGraph with hierarchical layout

An expanded example:

var layout = new mxHierarchicalLayout(graph);
layout.edgeStyle=4;
layout.intraCellSpacing=20;
layout.interRankCellSpacing=70;

Expanded mxGraph with hierarchical layout

You can see there is another parameter in the examples edgeStyle that defines different styles of the edges

For more information, take a look at mxGraph Hierarchical layout documentation

Kind Regards