-1

I have a graph made in cytoscape.js, using the dagre extension, that looks like this: Graph

How can I get the parent nodes to line up vertically? Since applying a separate layout to only parent nodes does not work (it applies to all nodes), I am stumped.

soberdosing
  • 1

1 Answers1

0

Unfortunately they are all poorly maintained visualization algorithms, so they don't have as many features.

I suggest you to open an issue in the algorithm repository where you explain how it can be improved. In this case you would like to have a better aspect of the visualization. https://github.com/cytoscape/cytoscape.js-dagre

You can also contribute to the dagre project adding this aesthetic criteria on to the graph.

At the end if you would like to have a better aspect you can apply a tweek to the graph after the layout execution. So you can think to an algorithm for making parent nodes line up vertically and then apply in the code.

For example something you can do for having nodes nearest to their father and also a good aspect ratio you can sort nodes in the level n + 1 in the barycenter of their father in the lever n. (let me know if I have made it clear)

I saw from the photo that you have groups, and the nodes within the group have different fathers, so if you put the nodes aligned with their fathers then you could have

  1. Nodes that are overlapping
  2. overlapping groups
  3. groups with too large a width

(let me know if I have made the problem clear)

I remember you how to position nodes in cytoscape.js

cyGraph.startBatch(); // for bach the differences and apply only once at the end

// random layout. you have to use yours
cyGraph.nodes().positions(( node, i ) => {
  return {
    x: Math.random() * cyGraph.width(),
    y: Math.random() * cyGraph.height(),
  };
});


cyGraph.endBatch();
Simone Ceccarelli
  • 201
  • 1
  • 2
  • 4