I have this array (of connections from ID to another):
const connectionsArr = [
{ sourceId: 1, targetId: 2 },
{ sourceId: 1, targetId: 9 },
{ sourceId: 9, targetId: 3 },
{ sourceId: 3, targetId: 5 },
{ sourceId: 3, targetId: 7 },
{ sourceId: 5, targetId: 6 },
{ sourceId: 6, targetId: 10 },
{ sourceId: 11, targetId: 12 }
];
From this array I created an array of "trees" with levels for each ID:
[
{
"id": 1,
"children": [
{
"id": 2,
"children": [],
"level": 1
},
{
"id": 9,
"children": [
{
"id": 3,
"children": [
{
"id": 5,
"children": [
{
"id": 6,
"children": [
{
"id": 10,
"children": [],
"level": 5
}
],
"level": 4
}
],
"level": 3
},
{
"id": 7,
"children": [],
"level": 3
}
],
"level": 2
}
],
"level": 1
}
],
"level": 0
},
{
"id": 11,
"children": [
{
"id": 12,
"children": [],
"level": 1
}
],
"level": 0
}
]
how can I set coordinates (x , y) for each id and the coordinates will be hierarchical, and finally if I decide to put them on a picture / canvas is should look like this:
I don't want to use an external library at all.
Thanks in advance to those who helped and will help .