使用HTML/JS/CSS/PHP/MMySQL构建家谱

我的任务是构建类似的东西，我需要一些有效解决方案的建议/意见：

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值。这是一个好方法吗，还是有更好的方法（或者像谷歌组织结构图可视化这样的方法来加快速度）？