C links

clink stands for curved links

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

Clink options:

 
        var family = new FamilyTree(document.getElementById('tree'), {
            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

Edit in BALKAN Code

Clink constants:

 
        FamilyTree.CLINK_CURVE = 1.5;
        var family = new FamilyTree(document.getElementById('tree'), {
            clinks: [
                {from: 4, to: 0, label: 'text'}
            ]   
            ...
        });

Change FamilyTree.CLINK_CURVE if you want to change the curve
Use FamilyTree.CLINK_CURVE = 0 for straight link.

Edit in BALKAN Code

Clink methods:

 
family.addClink(from, to, label, template)

 
family.removeClink(from, to)

Edit in BALKAN Code

Clink templates:

Edit in BALKAN Code

Get the source code of 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:

 
         var family = new FamilyTree(...);
         family.on('clink-click', function (sender, args) {
                // your code goes here  
            })

         family.load(...);

Example:

Edit in BALKAN Code

C links

In this article