labella.js | Placing labels on a timeline without overlap | Frontend Framework library

The set of control points for an edge is defined by N weights (w₁, w₂, ... w_N) and N respective distances (d₁, d₂, ... d_N).

The weight defines how close a point is to the source or target, and the distance controls how far away from a source-target line the point should be. The sign of the distance controls the side of the source-target line that the curve lies on (i.e the handedness). See the docs for more info: http://js.cytoscape.org/#style/bezier-edges

The following diagram summarises the values for a single point for simplicity, but you could extend this to multiple points:

Note that the above image assumes edge-distances: node-position, whereas the following diagram assumes edge-distances: intersection (default):

For complex usecases, edge-distances: node-position makes calculations easier -- but you have to be more careful to not specify points in the node body. The end result is almost the same for these examples, so I didn't update the curve. Larger nodes of different sizes would make the difference between these cases more apparent.

A bezier's control point does not intersect the control point. The control point "pulls" the curve towards the point. For quadratic bezier like in Cytoscape, the distance of the curve will be half that of the control point. For more info on beziers, see Wikipedia: https://en.wikipedia.org/wiki/B%C3%A9zier_curve

On the other hand, segment edges will intersect the points you specify, because they're just a series of straight lines: http://js.cytoscape.org/#style/segments-edges