Question

我的任务是建立与此类似的东西，我需要一些建议/意见才能找到有效的解决方案：

到目前为止，我已尝试使用嵌套集模型来表示我的数据，但我认为不可能有多个父节点。我见过的几乎所有例子都只涉及一个有多个孩子的父母。我也尝试使用Google Visualization Organization Chart，它看起来很棒，几乎解决了所有显示问题，但我遇到的问题是节点只支持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操作中。

使用HTML / JS / CSS / PHP / MySQL构建族树

1 个答案: