Can I connect all children directly to one parent in Balkan OrgChart.js? This is my starting point based on the documentation of OrgChart.js.
window.onload = function () {
OrgChart.templates.family_template = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.family_template.size = [86, 86];
OrgChart.templates.family_template.plus = "";
OrgChart.templates.family_template.minus = "";
OrgChart.templates.family_template.rippleRadius = 40;
OrgChart.templates.family_template.name = '<text style="font-size: 12px;" fill="#000000" x="43" y="100" text-anchor="middle">{val}</text>';
OrgChart.templates.family_template.title = '<text style="font-size: 12px;" fill="#aeaeae" x="43" y="115" text-anchor="middle">{val}</text>';
OrgChart.templates.family_template.img = '<clipPath id="{randId}"><circle cx="43" cy="43" r="38.5"></circle></clipPath></circle><image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="3" y="3" width="80" height="80"></image>';
OrgChart.templates.family_template.node = '<circle stroke-width="3" fill="none" stroke="#aeaeae" cx="43" cy="43" r="41.5"></circle>';
OrgChart.templates.family_template.defs = '<g transform="matrix(0.05,0,0,0.05,-13,-15.5)" id="baby"><circle cx="260" cy="310" r="200" fill="#ffffff"></circle><path fill="...
OrgChart.templates.family_template_blue = Object.assign({}, OrgChart.templates.family_template);
OrgChart.templates.family_template_blue.node = '<circle stroke-width="3" fill="none" stroke="#039BE5" cx="43" cy="43" r="41.5"></circle>';
var chart = new OrgChart(document.getElementById("tree"), {
template: "family_template",
enableSearch: false,
siblingSeparation: 100,
nodeBinding: {
field_0: 'id',
name: "name",
title: "title",
img: "img",
},
tags: {
blue: {
template: "family_template_blue"
}
}
});
chart.on('render-link', function(sender, args){
if (args.cnode.ppid != undefined){
args.html += '<use xlink:href="#baby" x="'+ args.p.xa +'" y="'+ args.p.ya +'"/>';
}
});
chart.load([
{ id: 1, tags: ["blue"], name: "King George VI", img: "https://cdn.balkan.app/shared/f1.png"},
{ id: 2, pid: 1, tags: ["left-partner"], name: "Queen Elizabeth", img: "https://cdn.balkan.app/shared/f2.png" },
{ id: 3, pid: 1, tags: ["partner"], name: "Queen Elizabeth", img: "https://cdn.balkan.app/shared/f2.png" },
{ id: 4, pid: 1, name: "Queen Elizabeth", title: "The Queen Mother", img: "https://cdn.balkan.app/shared/f2.png" },
{ id: 5, pid: 1, tags: ["right-partner"], name: "Queen Elizabeth", img: "https://cdn.balkan.app/shared/f2.png" },
{ id: 6, pid: 1, tags: ["partner"], name: "Queen Elizabeth", img: "https://cdn.balkan.app/shared/f2.png" },
]);
};
Here's the outcome of the above code: https://i.sstatic.net/CtGnc.png
Is it possible to achieve a result similar to this? https://i.sstatic.net/WJy25.png
I'm currently at an impasse and unsure how to proceed from here.