Show / Hide Table of Contents

S links

slink stands for second links

You can specify two or more second links in one Org Chart JS

Slink options: 
 
        var chart = new OrgChart(document.getElementById('tree'), {
            slinks: [
                {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 slink, the position of the label depends of the labelPosition of the slink template. labelPosition could be one of the following values "start", "end" and "middle"


Add template if you want to add specifics style to the slink
BALKAN Code Edit in BALKAN Code

Slink methods: 
 
     chart.addSlink(from, to, label, template)        

 
     chart.removeSlink(from, to)
BALKAN Code Edit in BALKAN Code

Slink templates:
BALKAN Code Edit in BALKAN Code 


 
OrgChart.slinkTemplates.orange = {
    defs: '<marker id="arrowSlinkOrange" 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="dotSlinkOrange" 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 stroke-dasharray="4, 2" marker-start="url(#dotSlinkOrange)" marker-end="url(#arrowSlinkOrange)" '
                 + 'stroke-linejoin="round" stroke="#F57C00" stroke-width="2" fill="none" d="{d}" />',
    label: '<text dominant-baseline="middle" fill="#F57C00" alignment-baseline="middle" text-anchor="middle" '
                  + 'x="{x}" y="{y}">{val}</text>',
    labelPosition: 'middle'
};

OrgChart.slinkTemplates.blue = {
    defs: '<marker id="arrowSlinkBlue" 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="dotSlinkBlue" 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 stroke-dasharray="4, 2" marker-start="url(#dotSlinkBlue)" marker-end="url(#arrowSlinkBlue)" '
                 + 'stroke-linejoin="round" stroke="#039BE5" stroke-width="2" fill="none" d="{d}" />',
    label: '<text fill="#039BE5" text-anchor="middle" x="{x}" y="{y}">{val}</text>',
    labelPosition: 'middle'
};

OrgChart.slinkTemplates.yellow = {
    defs: '<marker id="arrowSlinkYellow" 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="dotSlinkYellow" 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 stroke-dasharray="4, 2" marker-start="url(#dotSlinkYellow)" marker-end="url(#arrowSlinkYellow)" '
                 + 'stroke-linejoin="round" stroke="#FFCA28" stroke-width="2" fill="none" d="{d}" />',
    label: '<text fill="#FFCA28" text-anchor="middle" x="{x}" y="{y}">{val}</text>',
    labelPosition: 'middle'
};

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

 
        var chart = new OrgChart(...);
        chart.on('slink-click', function (sender, args) {
            // your code goes here  
        })

        chart.load(...);
Example:
BALKAN Code Edit in BALKAN Code

Warning!

Slinks are not supported between different trees and subtrees, although they may work in some of these cases.

You can use Clinks instead.

In this article