CODEWITHSUNDEEP
cytoscape.js
user1661621
user1661621

Reputation: 797

How to create a hierarchy

just started playing with cytoscape.js and the breathfirst layout. Looks like it will be a great library. I want to be able to create a layered or tree like layout, ideally being able to pin nodes to a level. Is there any suggestions on the correct layout to use or how to achieve it.

Does anyone know how to use the roots: ? I tried like this "roots: 'xyz'" where xyz is the id of the root node in my diagram.

Also I was trying to lock my root node like below using the position and locked attribute which did not seem to work.

        { data: {  id: "XYZ", name: "XYZ", weight: 100, faveColor: "#F5A45D", faveShape: "triangle" , position: {x: 150, y: 10}, locked: true}},

If I can't get it to work my fall back will be to use graphviz to calculate the layout and position the nodes manually in code.

Upvotes: 1

Views: 1274

Answers (1)

maxkfranz
maxkfranz

Reputation: 12242

You can only specify elements as roots. I'll add the ability to use selector strings for 2.2.4: https://github.com/cytoscape/cytoscape.js/issues/498

As for the layout itself, nodes are positioned based on edge direction hierarchy, so you can only guarantee the position of the specified root nodes. The rest fall underneath in the hierarchy.

Upvotes: 1

Related Questions