Show / Hide Table of Contents

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:
 
    
    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:
 
        
OrgChart.CLINK_CURVE = 1.5;
    
Change OrgChart.CLINK_CURVE if you want to change the curve
Use OrgChart.CLINK_CURVE = 0 for straight link.

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)        

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:

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