CODEWITHSUNDEEP
javascriptgraphcytoscape.js
ted
ted

Reputation: 14734

How to draw short edges in cytoscape.js

Here is an example of edges I have on my graph.

How do I shorten the edges? Like 2 or 3 times at least. I haven't found the information on cytoscape's wiki

{
    selector: 'edge',
    style: {
        'width': 10,
        'target-arrow-shape': 'triangle',
        'line-color': '#9dbaea',
        'target-arrow-color': '#9dbaea',
        'curve-style': 'bezier',
        'label' : 'data(label)'
    }
}

Edge example

Upvotes: 0

Views: 408

Answers (1)

maxkfranz
maxkfranz

Reputation: 12242

The options in a layout affect the positioning of the nodes. The position of node A and node B is what affects the length of edge AB.

Take a careful look at the options in the layout(s) you are interested in, paying particular attention to

  • forces in force-directed/physics layouts,
  • spacing/compression multipliers in geometric shape layouts,
  • bounding boxes in any layout,
  • etc.

You may find it easiest to experiment with different combinations of values, as some options can potentially affect the results of others.

The math involved for line/curve lengths is straightforward. It's just the Pythagorean Theorem for (straight) lines proper, and quadratic Bezier curves otherwise.

Upvotes: 1

Related Questions