0

I am using the cytoscape js library for displaying a hierarchy of images. I followed the example on http://jsbin.com/gist/aedff159b0df05ccfaa5?js,output and found that the breadthfirst layout is what I need.

However, I find the rendered result unsatisfactory due to too much unused space. The arrows are too long. Even the example (http://jsbin.com/gist/aedff159b0df05ccfaa5?js,output) has this issue. For this example, I tried the following

  1. Increase the "height/width" in .selector('node') .css({
  2. Muck around with the distanceX and distanceY (node spacing) variables in layout.breadthfirst.js (line 352).

I am unable to reduce the unused space or reduce the length of the arrows.

Joel Gordon
  • 11
  • 1

2 Answers2

1

Ticket to follow: https://github.com/cytoscape/cytoscape.js/issues/737

If you want a new feature in future, please file a ticket.

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
1

For rushing Devs, try this layout option:

spacingFactor: 0

The manual says :

spacingFactor: 1.75, // positive spacing factor, 
                     // larger => more space between nodes (N.B. n/a if causes overlap)

That's the result of the ticket https://github.com/cytoscape/cytoscape.js/issues/737 reported by maxkfranz.

Djames
  • 462
  • 7
  • 14