ReactFlow สำหรับการแสดงผล Family Tree
Family tree คือ graph ข้อมูลเป็นชุด node ที่เชื่อมต่อด้วย edge ที่มี type — parent, spouse, sibling ReactFlow สร้างสำหรับ graph visualization โดยทั่วไปและรองรับกรณีนี้ได้ดี แต่ family tree มีข้อกำหนดเฉพาะที่ library ทั่วไปไม่รองรับ: parent relationship เป็นแบบ biological ซึ่งหมายความว่า child มี parent ได้พอดีสองคน, couple แสดงต่างจาก parent-child relationship และ layout ต้องรักษา generational hierarchy
Data Model
ก่อน ReactFlow คุณต้องการ data model ที่ represent family structure อย่างถูกต้อง ข้อผิดพลาดทั่วไป: การ model ความสัมพันธ์เป็นแค่ edge ใน graph ทั่วไป ที่ถูกต้อง: ให้ couple เป็น node ในตัวมันเอง
interface Person {
id: string;
name: string;
birthYear?: number;
deathYear?: number;
gender: 'male' | 'female' | 'other';
}
interface CoupleNode {
id: string;
type: 'couple';
person1Id: string;
person2Id: string;
marriageYear?: number;
}