ReactFlow 用于家谱可视化
数据模型
家谱在数据层面是一个图，有三种边类型：parent-child（父子关系）、spouse（配偶关系）和 sibling（兄弟姐妹关系，通常隐式推导）。
我们的数据模型：
interface Person {
id: string
name: string
birthYear: number
deathYear?: number
}
interface Relationship {
type: "parent-child" | "spouse"
fromId: string
toId: string
}兄弟姐妹关系在查询时从共同的父节点推导，而不是明确存储——这避免了当父子关系改变时需要更新兄弟姐妹数据。
布局算法
家谱的布局比通用图形布局更有约束：父节点在子节点上方，配偶并排，代际间距一致。
我们使用 dagre 进行初始层次布局，然后进行后处理以将配偶节点对齐到相同高度，并最小化同代成员之间的边交叉。
ReactFlow 集成
ReactFlow 处理节点渲染、缩放和平移，以及边路由。我们自定义了：节点组件（不同的个人 vs 婚姻节点样式）、边类型（父子关系 vs 配偶关系的不同样式），以及选择行为（选择一个人时高亮其直系亲属）。
大型家谱的性能
家谱可能会变得很大——数百人并不罕见。ReactFlow 的虚拟化处理视口外节点的渲染，但布局计算可能很慢。我们通过在 Web Worker 中运行布局算法来解决这个问题，以避免阻塞主线程。