我的任务是构建与此类似的东西，我需要一些建议/意见以获得有效的解决方案：
到目前为止，我已经尝试使用嵌套集模型来表示我的数据，但我认为它不可能有多个父节点。几乎我见过的每个例子都只涉及一个有多个孩子的父母。我还尝试使用 Google 可视化组织结构图，它看起来很棒，几乎解决了所有显示问题，但我遇到了同样的问题，节点再次仅支持 1 个父节点。所以我想我尝试自己构建一些东西，好吧，我没有太多运气。
至于让树正确显示，最大的问题之一是弄清楚如何将节点放置在正确的位置。请注意，在 Family Echo 中，父节点如何根据子节点的数量适当间隔开，以免与周围的其他节点发生冲突。我一直在尝试至少复制这种行为，所以我将不胜感激任何提示。我尝试的是遍历一个数组，如下所示，其中包含有关家庭的所有数据：
{
508 : {
"id" : 1,
"name" : "Son",
"Parent" : {
17864 : {
"id" : 2,
"name" : "Father"
},
65926 : {
"id" : 3,
"name" : "Mother"
}
}
},
17864 : {
"id" : 2,
"name" : "Father",
"Partner" : {
65926: {
"id" : 3,
"name" : "Mother"
}
},
"Son/Daughter" : {
508 : {
"id" : 1,
"name" : "Son"
}
}
},
65926 : {
"id" : 3,
"name" : "Mother",
"Partner" : {
17864: {
"id" : 2,
"name" : "Father"
}
},
"Son/Daughter" : {
508 : {
"id" : 1,
"name" : "Son"
}
}
}
}
（508、17864、65926 充当每个家庭成员的唯一随机键），然后使用一些递归函数，创建第二个更清洁的变量，没有任何重复，包括为每个成员计算的 x/y 坐标。下面的第二个变量示例：
{
508 : {
"id" : 1,
"name" : "Son",
"x" : 0,
"y" : 0
},
17864 : {
"id" : 2,
"name" : "Father",
"x" : 1,
"y" : -1
},
65926 : {
"id" : 3,
"name" : "Mother",
"x" : -1,
"y" : -1
}
}
然后我循环遍历第二个变量并开始绘制具有绝对定位的固定维度 DIV，并使用 X 和 Y 坐标修改左侧和顶部 CSS 值。这是一个好方法，还是有更好的方法（或者可能像谷歌组织图表可视化来加快速度）？