Support cubic beziers curve style for edges

Issue type

Feature request

Description of new feature

• Provide a new curve-style like unbundled-cubic-bezier.
• Support following parameters:
  • control-points. It should be 4-length tuple of floating between 0 and 1. Those would be same points as the ones used in https://cubic-bezier.com/#.75,0,.25,1.

Motivation for new feature

Provide nice hierarchical layouts like the following example (taken from d3 gallery):

This has been asked on stackoverflow

[gtnx]

Thanks @IfatChitin it helped a lot.

I did another codepen which simulates cubic beziers edge by using two quadratic bezier edges.

Here’s how i did for two points P0 and P1. The idea is to generate two symmetric quadratic bezier curves which are represented by center control points A & B. Those control points coordinates are found by solving beziers equation. In the relative coordinates where (x0, y0) = (0, 0) & (x1, y1) = (1, 1), we have (xA, yA) = (0.25, 0) & (xB, yB) = (0.75, 1).

Cytoscape expects for the parameter control-points-distances the distance between the point P1 and the imaginary line between P0 & P2 as illustrated here. With simple geometry, we can compute this distance d which is illustrated in the below figure.

• z = sqrt((x1-x0)**2 + (y1-y0)**2)
• costheta = (x1-x0)/z
• h=0.25*(y1-y0) (thales theorem)
• d=h*costheta

Hope this helps other people.

[IfatChitin]

Hi @gtnx, Here is an example of how we achieved these beautiful edges (with relative values in terms of distance between nodes) using the current API:

https://codepen.io/ifatchitin/pen/JjoopVK

Hope this helps 😃 Ifat