CODEWITHSUNDEEP
cytoscape.js
user3408654
user3408654

Reputation: 301

How to make the "breadthfirst" layout more compact

In cytoscape.js, I've been using the "breadthfirst" layout and configured it to be directed (the tree is directed downwards).

Here is an example: http://jsbin.com/jekago/1

It works great, however I would like the nodes to be closer together, especially vertically, and if possible without limiting the bounding box.

My node labels can be quite long so I would not mind having them spread apart horizontally.

How can I can achieve this with this layout? If I can't, what are you recommending? Thanks

Upvotes: 1

Views: 1568

Answers (2)

Vizi Csaba
Vizi Csaba

Reputation: 1

You can use as an example spacingFactor=1.5 to have 1.5x space between the elements regarding to the elements dimension. The fit:true is also a good idea. This is used regarding the div dimensions. In conjunction to work nice you have to set properly the minZoom maxZoom of the Cy element. And you can set avoidOverlap: true also .

Upvotes: 0

maxkfranz
maxkfranz

Reputation: 12242

The layout uses the available space and avoids node overlap. Reduce the available space as desired using the boundingBox, and specify fit: true if you want the graph to take up the entire viewport.

You can alternatively use spacingFactor, but this will not allow for as much control as boundingBox.

You'll have to experiment and see what functions best for your data.

Upvotes: 2

Related Questions