CODEWITHSUNDEEP
javascriptcytoscape.js
kevin
kevin

Reputation: 192

Cytoscape.js - how to use one layout for compound nodes and another for children of compound nodes

I am trying to use multiple layouts in Cytoscape.js. Specifically, I am trying to use the concentric layout to display normal nodes in a circle, with compound nodes in an outer circle. For each compound node, I want the associated child nodes to use the circle layout.

If I only add the parent nodes, they properly display in the outer circle in the concentric layout. Once I add the children and run the circle layout for each group of children, however, the children nodes (and subsequently their parent node) are rendered in the center of the entire graph. I was wondering if it was possible to render the graph such that the compound parent nodes retain their position in the outer circle, and the child nodes are formed in circles relative to where their parents are positioned.

Upvotes: 4

Views: 2834

Answers (1)

maxkfranz
maxkfranz

Reputation: 12250

A parent node does not have its position set directly by a layout. A parent node does not have an independent position: http://js.cytoscape.org/#notation/position

The position of a parent node is wholly dependent on the positions of its children. A layout will set the positions of only the non-parent nodes. Some layouts that are compound-aware, like CoSE, will take compound parent nodes into account in positioning the child nodes in order to minimise their area.

So if you want to position a compound node in a particular location, run a layout on its children (i.e. children.layout().run()) with the bounding box (boundingBox) of the layout defining the maximum bounds of the parent.

Upvotes: 5

Related Questions