-
Notifications
You must be signed in to change notification settings - Fork 3
Description
I have this code with me.`
<title>ApexTree Demo</title> <script src="https://cdn.jsdelivr.net/npm/apextree"></script><script>
const data = {
"id": "1",
"name": "Board of Directors",
"children": [
{
"id": "2",
"name": "CEO",
"children": [
{
"id": "3",
"name": "Chief Operating Officer",
"children": [
{
"id": "6",
"name": "Legal"
},
{
"id": "7",
"name": "Warehouse & Logistics"
},
{
"id": "8",
"name": "Operating Service"
},
{
"id": "9",
"name": "HR & Admin"
}
]
},
{
"id": "4",
"name": "Chief Customer Officer",
"children": [
{
"id": "10",
"name": "Pharma"
},
{
"id": "11",
"name": "Home Care"
},
{
"id": "12",
"name": "Medical"
},
{
"id": "13",
"name": "Retail"
},
{
"id": "14",
"name": "Consumer"
},
{
"id": "15",
"name": "Retail Pharmacies"
},
{
"id": "16",
"name": "Business Development"
},
{
"id": "17",
"name": "Regulatory"
},
{
"id": "18",
"name": "Marketing"
}
]
},
{
"id": "5",
"name": "Chief Finance Officer",
"children": [
{
"id": "19",
"name": "IT"
},
{
"id": "20",
"name": "Finance & Accounting"
}
]
},
{
"id": "21",
"name": "Quality & Compliance",
},
{
"id": "22",
"name": "Govt. Relations & Affairs",
}
]
}
]
};
const options = {
width: '100%',
height: 700,
nodeWidth: 120,
nodeHeight: 80,
childrenSpacing: 100,
siblingSpacing: 30,
direction: 'left',
canvasStyle: 'border: 1px solid black; background: #f6f6f6;'
};
const tree = new ApexTree(document.getElementById('svg-tree'), options);
const graph = tree.render(data);
</script>
The correct structure is shown, but due to condensed nature of nodes, they appear very small. The last row has many nodes. I checked in documentation whether its possible to push children of a node down than its siblings children ?
Are there any way to achieve this ?
Thanks and Best Regards
