I need to make an family tree in angular when I am using this function
renderFamilyTree() {
// Set up the SVG container
const svg = d3.select(this.familyTree.nativeElement).append('svg')
.attr('width', 1200)
.attr('height', 800)
.append('g')
.attr('transform', 'translate(50,50)');
// Create a tree layout
const treeLayout = d3.tree().size([1000, 600]);
// Create a hierarchy from the family data
const root = d3.hierarchy(this.familyData, (d) => d.data);
// Assign positions to each node
treeLayout(root);
// Draw nodes
const nodes = svg.selectAll('.node')
.data(root.descendants())
.enter().append('g')
.attr('class', 'node')
.attr('transform', (d) => `translate(${d.x},${d.y})`);
nodes.append('circle')
.attr('r', 10);
nodes.append('text')
.attr('dy', '.35em')
.attr('y', (d) => (d.children ? -20 : 20))
.style('text-anchor', 'middle')
.text((d) => `${d.data.first_name} ${d.data.last_name}`);
// Draw lines connecting nodes
svg.selectAll('.link')
.data(root.descendants().slice(1)) // Exclude the root node
.enter().append('line')
.attr('class', 'link')
.attr('x1', (d) => d.x)
.attr('y1', (d) => d.y)
.attr('x2', (d) => d.parent.x)
.attr('y2', (d) => d.parent.y);
}
getting treee like this
now I want to connect node using the lines like this
I have tried with div also but not getting the expected output sharing the data I am using
this.familyData = {
"family_id": "dd42d7c3-fe33-4cd9-83b2-b50721c45357",
"family_name": "Schmeler family",
"origin": null,
"privacy": 1,
"live_member_count": 3,
"dead_member_count": 0,
"city": "",
"owner_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"data": [
{
"user_id": "87d9dd1e-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Alby's Father",
"last_name": "Father",
"gender": 1,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1,
"data": [
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "spouse 1",
"last_name": "Father",
"gender": 2,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1
},
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Abby's mother",
"last_name": "none",
"gender": 2,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1,
"data": [
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Abby's sister",
"last_name": "none",
"gender": 2,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1
},
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Alby",
"last_name": "none",
"gender": 1,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1,
"data": [
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Alby's spouse 3",
"last_name": "none",
"gender": 1,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 2
},
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Alby's spouse 1",
"last_name": "none",
"gender": 1,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 2,
"data": [
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Alby's child 1",
"last_name": "none",
"gender": 1,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1
},
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Alby's child 1",
"last_name": "none",
"gender": 1,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1
}
]
},
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Alby's spouse 2",
"last_name": "none",
"gender": 1,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 2,
"data": [
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Alby's child 1",
"last_name": "none",
"gender": 1,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1
},
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Alby's child 2",
"last_name": "none",
"gender": 1,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1
},
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Alby's child 2",
"last_name": "none",
"gender": 1,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1
}
]
}
]
},
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Abby's brother",
"last_name": "none",
"gender": 1,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1,
"data": [
{
"username": "Alby's brother spouse 1",
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "Abby's brother 's spouse",
"last_name": "none",
"gender": 2,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1
}
]
}
]
},
{
"user_id": "87d9dd1e-f34-1e3d-4e1d-9ecf-3ecd5e0c4526",
"first_name": "spouse 1",
"last_name": "Father",
"gender": 2,
"unique_code": null,
"profile_pic": null,
"marital_status": null,
"living_status": 1,
"friendRequest": null,
"relation_type": 1
}
]
}
]
}