Prevent links from colliding

[seekeramento]

I can have multiple links drawn from the same source. When I do this, the links collide in a way that make them all look like a single line that gets joined at the beginning, and forked at the end.
I tried changing the router and connector to many different options, but nothing worked.

What should I do in order to prevent links from getting collided?

[kumilingus]

• You can use vertices and anchors: https://jsfiddle.net/kumilingus/07dxjnam/23/
• Set the vertices dynamically: https://resources.jointjs.com/tutorial/multiple-links-between-elements
• You can write a custom router: https://jsfiddle.net/kumilingus/jvdn451y/

The solution really depends on what type of diagram you build.

[seekeramento]

This means that I will not be able to benefit from the built-in routing algorithms the library provides?

[kumilingus]

Not necessarily. You can use vertices and anchors with existing routers and you can use a built-in router from within a custom router.

paper.options.defaultRouter = function(vertices, opt, linkView) {
 const prepareVertices = myFunctionThatAdjustVertices(vertices);
 const manhattanVertices = joint.routers.manhattan.call(this, vertices, opt, linkView);
 const postProcessedVertices = myOtherFunctionThatAdjustVertices(manhattanVertices);
 return postProcessedVertices;
}