S links
slink stands for second links
You can specify two or more second links in one chart.
With Slinks you can show multiple parent or any other relation.
Slink options: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
Slink methods:
chart.addSlink(from, to, label, template)
chart.removeSlink(from, to)
Slink templates:
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:
chart.on('slink-click', function (sender, args) { // your code goes here })Example:
Warning!
Slinks are not supported between different trees and subtrees, although they may work in some of these cases.
You can use Clinks instead.