Drawing multiple, bezier-connected edges in a force-directed graph in D3

I'm trying to draw a force-directed graph with multiple edges per node where the edges appear distinct from each other, irregardless of the distance between the target and the source node.

tl;dr

Current graph:

I've got a force directed graph

Each node can have multiple edges pointing to another node

To illustrate multiple edges emanating from a node, I use Arcs instead of Lines to separate each one (by giving an incremented

linknum

and using it to calculate the arcs radius)

The problem:

If the distance between 2 connected nodes becomes too big, the arcs merge into each other - since an arc cannot "expand" more than the radius of the imaginary circle that overlaps the 2.

Therefore the edges which should look distinct from each other, merge into 1 big arc.

Possible solutions:

I could fix the Arc radius to correspond to a valid/suitable link distance so this never happens but unfortunately the nodes are draggable/anchored by the user (I omitted the user drag/anchor code from my code sample below for brevity)

I think it would make more sense to use bezier curves instead of arcs which don't have an expansion limit. However, I'm not sure how would I go about and calculate their control points for this case

That would turn them from arcs (A in the path syntax) to beziers (C in the path syntax). The control point is just stuck out at right angles from the centre of the line between the two nodes, with the 'stick-out' distance scaled to the linknum variable.