In JointJs, how to have links between elements that resemble the 3ds max creation graphs?

Question

I have a JointJs graph. I would like links between elements in my graph to look like this:

Instead of the straight lines we get out of the box.

Basically, the arrows are horizontal at the point where they meet the target, and bend smoothly.

How can this be achieved?

Answer 1

link connector is the thing you're looking for.

you adjust particular link:

link.set('connector', { name: 'normal' });
link.set('connector', { name: 'smooth' });
link.set({name : 'rounded', args:{radius: 50}});

or you can set a default for all links in the graph

var paper = new joint.dia.Paper({
        width: 800,
        height: 800,
        gridSize: 1,
        model: graph,
        defaultConnector: {
            name: 'smooth'
        }
    });