elkjs icon indicating copy to clipboard operation
elkjs copied to clipboard

Help in configuring layout

Open manansoni77 opened this issue 8 months ago • 4 comments

Hi!

I have a dataset of nodes which are logically connected to each other, and my goal is to auto layout them in a similar manner.

Manually laid out nodes - image

When trying to auto layout the same nodes, I am getting results which are very different. Auto layout results (left to right)

layoutOptions = {
    'elk.algorithm': 'layered',
    'elk.layered.spacing.nodeNodeBetweenLayers': '100',
    'elk.spacing.nodeNode': '80',
    'elk.direction': 'RIGHT',
    'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX'
  };

image (part of graph cut off)

Upon investigation, found that upon removing all edges from 'peach node' to 'green node' (this creates a cycle between the two), the layout works better. image

To solve this issue, tried a few methods (given here) which are supposed to better format and resolve cycles. The one that made some improvement was cycleBreaking.strategy: MODEL_ORDER.

layoutOptions = {
    'elk.algorithm': 'layered',
    'elk.layered.spacing.nodeNodeBetweenLayers': '100',
    'elk.spacing.nodeNode': '80',
    'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX',
    'elk.progressBar': true,
    'elk.validateOptions': true,
    'elk.zoomToFit': true,
    'elk.direction': 'RIGHT',
    'elk.layered.cycleBreaking.strategy': 'MODEL_ORDER',
    'considerModelOrder.strategy': 'NODES_AND_EDGES'
  };

image (part of graph cutoff)

Need help in improving the configuration for solving this issue, and improving the auto layout to better match the manually laid out graph.

version "elkjs": "^0.9.3"

manansoni77 avatar Jun 17 '24 20:06 manansoni77