C links

clink stands for curved links

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

Clink options:

 
        var chart = new OrgChart(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:

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

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

Edit in BALKAN Code

Here is a code demo on how to simulate multiple parents with Clinks.

Clink methods:

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

 
chart.removeClink(from, to)

Edit in BALKAN Code

Clink templates:

Edit in BALKAN Code

Get the source code of clink templates

 
     OrgChart.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>'
    };

     OrgChart.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>'
    };

     OrgChart.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 chart = new OrgChart(...);
         chart.on('clink-click', function (sender, args) {
                // your code goes here  
            })

         chart.load(...);

Example:

Edit in BALKAN Code

C links

In this article