我的任务是构建类似的东西，我需要一些有效解决方案的建议/意见：
http://familyecho.com
到目前为止，我已经尝试使用嵌套集模型来表示我的数据，但我认为不可能有多个父节点。我看到的几乎每一个例子都只涉及一个有多个孩子的父母。我还尝试使用谷歌可视化组织图，它看起来很棒，几乎解决了所有的显示问题，但我再次遇到了同样的问题，节点只支持1个父节点。所以我想我试着自己建造一些东西，嗯，我运气不太好。
至于让树正确显示，最大的问题之一是弄清楚如何将节点定位在正确的位置。请注意，在"族回声"中，父节点的间距取决于它们的子节点数量，以免与周围的其他节点发生碰撞。我一直在尝试至少复制这种行为，所以我非常感谢任何提示。我尝试的是循环遍历一个数组，如下面的数组，其中包含有关该家族的所有数据：
{
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"
}
}
}
}
（5081786465926充当每个家族成员的唯一随机密钥），然后使用一些递归函数，在没有任何重复的情况下创建第二个清洁器变量，并且包括每个成员的计算的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值。这是一个好方法吗，还是有更好的方法（或者像谷歌组织结构图可视化这样的方法来加快速度）？
这听起来像是D3.js.的工作
D3.js是一个用于基于数据操作文档的JavaScript库。D3帮助您使用HTML、SVG和CSS将数据栩栩如生。D3对web标准的重视为您提供了现代浏览器的全部功能，而无需将自己束缚在专有框架中，将强大的可视化组件和数据驱动的DOM操作方法相结合。