Show / Hide Table of Contents

Partner/s

You can specify one or more Partner/s of a node by setting their tag to partner, left-partner or right-partner

Here is an example:

 
    
        {id: 2, pid: 1, tags: ['partner']},
 

left-partner

 
    
        {id: 2, pid: 1, tags: ['left-partner']},
 

Also you can specify multiple partners

 
    
{id: 4, pid: 1, tags: ['partner']},					
{id: 5, pid: 1, tags: ['partner']},
{id: 6, pid: 1, tags: ['partner']},
{id: 7, pid: 1, tags: ['partner']}
 

Children can have parent id pid and parent partner id ppid

 
    
        {id: 1},
        {id: 2, pid: 1, tags: ['partner']},					
        {id: 3, pid: 1, tags: ['partner']},
        {id: 4, pid: 1, ppid: 2 },
        {id: 5, pid: 1, ppid: 3 }
 

Here is an example with partner's 'children


Using render-link event in partners to add a link icon:

First define the icon:
 
    
OrgChart.templates.ana.defs = 
    `<g transform="matrix(0.05,0,0,0.05,-12,-9)" id="heart">
        <path fill="#F57C00" d="M438.482,58.61c-24.7-26.549-59.311-41.655-95.573-41.711c-36.291,0.042-70.938,15.14-95.676,41.694l-8.431,8.909  
        l-8.431-8.909C181.284,5.762,98.663,2.728,45.832,51.815c-2.341,2.176-4.602,4.436-6.778,6.778 
        c-52.072,56.166-52.072,142.968,0,199.134l187.358,197.581c6.482,6.843,17.284,7.136,24.127,0.654 
        c0.224-0.212,0.442-0.43,0.654-0.654l187.29-197.581C490.551,201.567,490.551,114.77,438.482,58.61z"/>
    <g>`;
 
Then add the event listener befor chart.load() method:
 
    
chart.on('render-link', function(sender, args){
    if (args.cnode.ppid != undefined){
        args.html += '<use xlink:href="#heart" x="'+ args.p.xa +'" y="'+ args.p.ya +'" />'
    }
});
 

Here is more coplex scenario


Partner node/s are very useful for family trees, see Royal Family Tree demo.