Skip to content

Possibility of moving children of one sibling away from children of other siblings #25

@iramguir

Description

@iramguir

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

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions