C links

clink stands for curved links

You can specify two or more curved links in one FamilyTree JS
We use clinks to show some additional relations. You can have one to many or may to many clink relations.

Clink options:
 
    
    clinks: [
        { from: 4, to: 0, label: 'text'}, 
        { from: 4, to: 5, template: 'blue' },
        { from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' },
    ]   
    
from is the id of the start node
to is the id of the end node
Define label if you want to add text in the middle of the clink
Add template if you want to add specifics style to the clink

Clink constants:
 
        
FamilyTree.CLINK_CURVE = 1.5;
    
Change FamilyTree.CLINK_CURVE if you want to change the curve
Use FamilyTree.CLINK_CURVE = 0 for straight link.
Clink methods:
 
        
family.addClink(from, to, label, template)        
 
        
family.removeClink(from, to)        

Clink templates:

 
            
FamilyTree.clinkTemplates.orange = {
    defs: '<marker id="arrowOrange" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" '
                    + 'orient="auto-start-reverse"><path fill="#F57C00" d="M 0 0 L 10 5 L 0 10 z" />'
        + '</marker>'
        + '<marker id="dotOrange" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5"> '
            + '<circle cx="5" cy="5" r="5" fill="#F57C00" />
        + </marker>',
    link: '<path marker-start="url(#dotOrange)" marker-end="url(#arrowOrange)" stroke="#F57C00" stroke-width="2" '
                    + 'fill="none" d="{d}" />',
    label: '<text fill="#F57C00" text-anchor="middle" x="{x}" y="{y}">{val}</text>'
};

FamilyTree.clinkTemplates.blue = {
    defs: '<marker id="arrowBlue" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" '
                    + 'orient="auto-start-reverse"><path fill="#039BE5" d="M 0 0 L 10 5 L 0 10 z" />'
        + '</marker>'
        + '<marker id="dotBlue" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5"> '
            + '<circle cx="5" cy="5" r="5" fill="#039BE5" />'
        + '</marker>',
    link: '<path marker-start="url(#dotBlue)" marker-end="url(#arrowBlue)" stroke="#039BE5" stroke-width="2" '
                    + 'fill="none" d="{d}" />',
    label: '<text fill="#039BE5" text-anchor="middle" x="{x}" y="{y}">{val}</text>'
};

FamilyTree.clinkTemplates.yellow = {
    defs: '<marker id="arrowYellow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" '
                    + 'orient="auto-start-reverse">''<path fill="#FFCA28" d="M 0 0 L 10 5 L 0 10 z" />'
        + '</marker>'
        + '<marker id="dotYellow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5"> '
            + '<circle cx="5" cy="5" r="5" fill="#FFCA28" />'
        + '</marker>',
    link: '<path marker-start="url(#dotYellow)" marker-end="url(#arrowYellow)" stroke="#FFCA28" stroke-width="2" '
                    + 'fill="none" d="{d}" />',
    label: '<text fill="#FFCA28" text-anchor="middle" x="{x}" y="{y}">{val}</text>'
};

You can use clink-click event to make some changes:

 
        
family.on('clink-click', function (sender, args) {
    // your code goes here  
});
Example: