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

Question

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

http://familyecho.com

到目前为止，我已经尝试使用嵌套集模型来表示我的数据，但我认为它不可能有多个父节点。几乎我见过的每个例子都只涉及一个有多个孩子的父母。我还尝试使用 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 值。这是一个好方法，还是有更好的方法（或者可能是像谷歌组织图表可视化来加快速度）？

Answer 1

这听起来像是D3.js 的工作。

D3.js 是一个基于数据操作文档的 JavaScript 库。 D3 帮助您使用 HTML、SVG 和 CSS 将数据变为现实。 D3 对 Web 标准的重视为您提供了现代浏览器的全部功能，而无需将自己束缚于专有框架，它结合了强大的可视化组件和数据驱动的 DOM 操作方法。